From d3e786ec808cb91f3d2df6c5e1041dd2e39481a2 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 7 Feb 2023 17:59:22 +0800
Subject: [PATCH] refactor(console): update app structure (#3066)

---
 packages/console/src/App.tsx                  | 122 ++++++++++--------
 .../AppBoundary/index.module.scss             |   0
 .../AppBoundary/index.tsx                     |   0
 .../Sidebar/components/Contact/hook.tsx       |   0
 .../components/Contact/index.module.scss      |   0
 .../Sidebar/components/Contact/index.tsx      |   0
 .../Sidebar/components/Item/index.module.scss |   0
 .../Sidebar/components/Item/index.tsx         |   0
 .../components/Section/index.module.scss      |   0
 .../Sidebar/components/Section/index.tsx      |   0
 .../AppContent}/Sidebar/hook.tsx              |   0
 .../AppContent}/Sidebar/icons/BarGraph.tsx    |   0
 .../AppContent}/Sidebar/icons/Bolt.tsx        |   0
 .../AppContent}/Sidebar/icons/Box.tsx         |   0
 .../AppContent}/Sidebar/icons/Cloud.tsx       |   0
 .../AppContent}/Sidebar/icons/Connection.tsx  |   0
 .../AppContent}/Sidebar/icons/Contact.tsx     |   0
 .../AppContent}/Sidebar/icons/Document.tsx    |   0
 .../AppContent}/Sidebar/icons/Gear.tsx        |   0
 .../AppContent}/Sidebar/icons/List.tsx        |   0
 .../AppContent}/Sidebar/icons/UserProfile.tsx |   0
 .../AppContent}/Sidebar/icons/Web.tsx         |   0
 .../AppContent}/Sidebar/index.module.scss     |   0
 .../AppContent}/Sidebar/index.tsx             |   0
 .../AppContent}/Sidebar/utils.ts              |   0
 .../containers/AppContent/index.module.scss   |  17 +++
 .../src/containers/AppContent/index.tsx       |  20 +++
 .../components/Topbar/index.module.scss       |   0
 .../AppLayout}/components/Topbar/index.tsx    |   0
 .../components/UserInfo/index.module.scss     |   0
 .../AppLayout}/components/UserInfo/index.tsx  |   0
 .../UserInfoSkeleton/index.module.scss        |   0
 .../components/UserInfoSkeleton/index.tsx     |   0
 .../AppLayout}/index.module.scss              |  16 ---
 .../AppLayout}/index.tsx                      |  20 ++-
 .../console/src/containers/AppLayout/types.ts |   5 +
 .../ErrorBoundary/index.tsx                   |   2 +-
 .../console/src/pages/CloudPreview/index.tsx  |   5 +
 38 files changed, 124 insertions(+), 83 deletions(-)
 rename packages/console/src/{components => containers}/AppBoundary/index.module.scss (100%)
 rename packages/console/src/{components => containers}/AppBoundary/index.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/components/Contact/hook.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/components/Contact/index.module.scss (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/components/Contact/index.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/components/Item/index.module.scss (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/components/Item/index.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/components/Section/index.module.scss (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/components/Section/index.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/hook.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/BarGraph.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/Bolt.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/Box.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/Cloud.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/Connection.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/Contact.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/Document.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/Gear.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/List.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/UserProfile.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/icons/Web.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/index.module.scss (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/index.tsx (100%)
 rename packages/console/src/{components/AppContent/components => containers/AppContent}/Sidebar/utils.ts (100%)
 create mode 100644 packages/console/src/containers/AppContent/index.module.scss
 create mode 100644 packages/console/src/containers/AppContent/index.tsx
 rename packages/console/src/{components/AppContent => containers/AppLayout}/components/Topbar/index.module.scss (100%)
 rename packages/console/src/{components/AppContent => containers/AppLayout}/components/Topbar/index.tsx (100%)
 rename packages/console/src/{components/AppContent => containers/AppLayout}/components/UserInfo/index.module.scss (100%)
 rename packages/console/src/{components/AppContent => containers/AppLayout}/components/UserInfo/index.tsx (100%)
 rename packages/console/src/{components/AppContent => containers/AppLayout}/components/UserInfoSkeleton/index.module.scss (100%)
 rename packages/console/src/{components/AppContent => containers/AppLayout}/components/UserInfoSkeleton/index.tsx (100%)
 rename packages/console/src/{components/AppContent => containers/AppLayout}/index.module.scss (54%)
 rename packages/console/src/{components/AppContent => containers/AppLayout}/index.tsx (83%)
 create mode 100644 packages/console/src/containers/AppLayout/types.ts
 rename packages/console/src/{components => containers}/ErrorBoundary/index.tsx (95%)
 create mode 100644 packages/console/src/pages/CloudPreview/index.tsx

diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
index 575829264..e465ec5b2 100644
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@@ -14,10 +14,10 @@ import './scss/overlayscrollbars.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';
+import AppBoundary from '@/containers/AppBoundary';
+import AppLayout from '@/containers/AppLayout';
+import ErrorBoundary from '@/containers/ErrorBoundary';
 import useSwrOptions from '@/hooks/use-swr-options';
 import initI18n from '@/i18n/init';
 import ApiResourceDetails from '@/pages/ApiResourceDetails';
@@ -47,8 +47,10 @@ import {
   SignInExperiencePage,
   UserDetailsTabs,
 } from './consts/page-tabs';
+import AppContent from './containers/AppContent';
 import ApiResourcePermissions from './pages/ApiResourceDetails/ApiResourcePermissions';
 import ApiResourceSettings from './pages/ApiResourceDetails/ApiResourceSettings';
+import CloudPreview from './pages/CloudPreview';
 import RolePermissions from './pages/RoleDetails/RolePermissions';
 import RoleSettings from './pages/RoleDetails/RoleSettings';
 import RoleUsers from './pages/RoleDetails/RoleUsers';
@@ -70,66 +72,78 @@ const Main = () => {
           <Routes>
             <Route path="callback" element={<Callback />} />
             <Route path="welcome" element={<Welcome />} />
-            <Route element={<AppContent />}>
-              <Route path="*" element={<NotFound />} />
-              <Route path="get-started" element={<GetStarted />} />
-              <Route path="dashboard" element={<Dashboard />} />
-              <Route path="applications">
-                <Route index element={<Applications />} />
-                <Route path="create" element={<Applications />} />
-                <Route path=":id" element={<ApplicationDetails />} />
-              </Route>
-              <Route path="api-resources">
-                <Route index element={<ApiResources />} />
-                <Route path="create" element={<ApiResources />} />
-                <Route path=":id" element={<ApiResourceDetails />}>
+            <Route element={<AppLayout />}>
+              <Route path="/cloud-preview" element={<CloudPreview />} />
+              <Route element={<AppContent />}>
+                <Route path="*" element={<NotFound />} />
+                <Route path="get-started" element={<GetStarted />} />
+                <Route path="dashboard" element={<Dashboard />} />
+                <Route path="applications">
+                  <Route index element={<Applications />} />
+                  <Route path="create" element={<Applications />} />
+                  <Route path=":id" element={<ApplicationDetails />} />
+                </Route>
+                <Route path="api-resources">
+                  <Route index element={<ApiResources />} />
+                  <Route path="create" element={<ApiResources />} />
+                  <Route path=":id" element={<ApiResourceDetails />}>
+                    <Route
+                      index
+                      element={<Navigate replace to={ApiResourceDetailsTabs.Settings} />}
+                    />
+                    <Route
+                      path={ApiResourceDetailsTabs.Settings}
+                      element={<ApiResourceSettings />}
+                    />
+                    <Route
+                      path={ApiResourceDetailsTabs.Permissions}
+                      element={<ApiResourcePermissions />}
+                    />
+                  </Route>
+                </Route>
+                <Route path="sign-in-experience">
                   <Route
                     index
-                    element={<Navigate replace to={ApiResourceDetailsTabs.Settings} />}
+                    element={<Navigate replace to={SignInExperiencePage.BrandingTab} />}
                   />
-                  <Route path={ApiResourceDetailsTabs.Settings} element={<ApiResourceSettings />} />
+                  <Route path=":tab" element={<SignInExperience />} />
+                </Route>
+                <Route path="connectors">
+                  <Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
+                  <Route path=":tab" element={<Connectors />} />
+                  <Route path=":tab/create/:createType" element={<Connectors />} />
+                  <Route path=":tab/:connectorId" element={<ConnectorDetails />} />
+                </Route>
+                <Route path="users">
+                  <Route index element={<Users />} />
+                  <Route path="create" element={<Users />} />
+                  <Route path=":id" element={<UserDetails />}>
+                    <Route index element={<Navigate replace to={UserDetailsTabs.Settings} />} />
+                    <Route path={UserDetailsTabs.Settings} element={<UserSettings />} />
+                    <Route path={UserDetailsTabs.Roles} element={<UserRoles />} />
+                    <Route path={UserDetailsTabs.Logs} element={<UserLogs />} />
+                  </Route>
                   <Route
-                    path={ApiResourceDetailsTabs.Permissions}
-                    element={<ApiResourcePermissions />}
+                    path={`:id/${UserDetailsTabs.Logs}/:logId`}
+                    element={<AuditLogDetails />}
                   />
                 </Route>
-              </Route>
-              <Route path="sign-in-experience">
-                <Route index element={<Navigate replace to={SignInExperiencePage.BrandingTab} />} />
-                <Route path=":tab" element={<SignInExperience />} />
-              </Route>
-              <Route path="connectors">
-                <Route index element={<Navigate replace to={ConnectorsTabs.Passwordless} />} />
-                <Route path=":tab" element={<Connectors />} />
-                <Route path=":tab/create/:createType" element={<Connectors />} />
-                <Route path=":tab/:connectorId" element={<ConnectorDetails />} />
-              </Route>
-              <Route path="users">
-                <Route index element={<Users />} />
-                <Route path="create" element={<Users />} />
-                <Route path=":id" element={<UserDetails />}>
-                  <Route index element={<Navigate replace to={UserDetailsTabs.Settings} />} />
-                  <Route path={UserDetailsTabs.Settings} element={<UserSettings />} />
-                  <Route path={UserDetailsTabs.Roles} element={<UserRoles />} />
-                  <Route path={UserDetailsTabs.Logs} element={<UserLogs />} />
+                <Route path="audit-logs">
+                  <Route index element={<AuditLogs />} />
+                  <Route path=":logId" element={<AuditLogDetails />} />
                 </Route>
-                <Route path={`:id/${UserDetailsTabs.Logs}/:logId`} element={<AuditLogDetails />} />
-              </Route>
-              <Route path="audit-logs">
-                <Route index element={<AuditLogs />} />
-                <Route path=":logId" element={<AuditLogDetails />} />
-              </Route>
-              <Route path="roles">
-                <Route index element={<Roles />} />
-                <Route path="create" element={<Roles />} />
-                <Route path=":id" element={<RoleDetails />}>
-                  <Route index element={<Navigate replace to={RoleDetailsTabs.Settings} />} />
-                  <Route path={RoleDetailsTabs.Settings} element={<RoleSettings />} />
-                  <Route path={RoleDetailsTabs.Permissions} element={<RolePermissions />} />
-                  <Route path={RoleDetailsTabs.Users} element={<RoleUsers />} />
+                <Route path="roles">
+                  <Route index element={<Roles />} />
+                  <Route path="create" element={<Roles />} />
+                  <Route path=":id" element={<RoleDetails />}>
+                    <Route index element={<Navigate replace to={RoleDetailsTabs.Settings} />} />
+                    <Route path={RoleDetailsTabs.Settings} element={<RoleSettings />} />
+                    <Route path={RoleDetailsTabs.Permissions} element={<RolePermissions />} />
+                    <Route path={RoleDetailsTabs.Users} element={<RoleUsers />} />
+                  </Route>
                 </Route>
+                <Route path="settings" element={<Settings />} />
               </Route>
-              <Route path="settings" element={<Settings />} />
             </Route>
           </Routes>
         </AppBoundary>
diff --git a/packages/console/src/components/AppBoundary/index.module.scss b/packages/console/src/containers/AppBoundary/index.module.scss
similarity index 100%
rename from packages/console/src/components/AppBoundary/index.module.scss
rename to packages/console/src/containers/AppBoundary/index.module.scss
diff --git a/packages/console/src/components/AppBoundary/index.tsx b/packages/console/src/containers/AppBoundary/index.tsx
similarity index 100%
rename from packages/console/src/components/AppBoundary/index.tsx
rename to packages/console/src/containers/AppBoundary/index.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/hook.tsx b/packages/console/src/containers/AppContent/Sidebar/components/Contact/hook.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/components/Contact/hook.tsx
rename to packages/console/src/containers/AppContent/Sidebar/components/Contact/hook.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss b/packages/console/src/containers/AppContent/Sidebar/components/Contact/index.module.scss
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.module.scss
rename to packages/console/src/containers/AppContent/Sidebar/components/Contact/index.module.scss
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx b/packages/console/src/containers/AppContent/Sidebar/components/Contact/index.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
rename to packages/console/src/containers/AppContent/Sidebar/components/Contact/index.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Item/index.module.scss b/packages/console/src/containers/AppContent/Sidebar/components/Item/index.module.scss
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/components/Item/index.module.scss
rename to packages/console/src/containers/AppContent/Sidebar/components/Item/index.module.scss
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Item/index.tsx b/packages/console/src/containers/AppContent/Sidebar/components/Item/index.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/components/Item/index.tsx
rename to packages/console/src/containers/AppContent/Sidebar/components/Item/index.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss b/packages/console/src/containers/AppContent/Sidebar/components/Section/index.module.scss
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/components/Section/index.module.scss
rename to packages/console/src/containers/AppContent/Sidebar/components/Section/index.module.scss
diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Section/index.tsx b/packages/console/src/containers/AppContent/Sidebar/components/Section/index.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/components/Section/index.tsx
rename to packages/console/src/containers/AppContent/Sidebar/components/Section/index.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/hook.tsx b/packages/console/src/containers/AppContent/Sidebar/hook.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/hook.tsx
rename to packages/console/src/containers/AppContent/Sidebar/hook.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/BarGraph.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/BarGraph.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/BarGraph.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/BarGraph.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/Bolt.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/Bolt.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/Bolt.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/Bolt.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/Box.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/Box.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/Box.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/Box.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/Cloud.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/Cloud.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/Cloud.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/Cloud.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/Connection.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/Connection.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/Connection.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/Connection.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/Contact.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/Contact.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/Contact.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/Contact.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/Document.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/Document.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/Document.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/Document.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/Gear.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/Gear.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/Gear.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/Gear.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/List.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/List.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/List.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/List.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/UserProfile.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/UserProfile.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/UserProfile.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/UserProfile.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/icons/Web.tsx b/packages/console/src/containers/AppContent/Sidebar/icons/Web.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/icons/Web.tsx
rename to packages/console/src/containers/AppContent/Sidebar/icons/Web.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/index.module.scss b/packages/console/src/containers/AppContent/Sidebar/index.module.scss
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/index.module.scss
rename to packages/console/src/containers/AppContent/Sidebar/index.module.scss
diff --git a/packages/console/src/components/AppContent/components/Sidebar/index.tsx b/packages/console/src/containers/AppContent/Sidebar/index.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/index.tsx
rename to packages/console/src/containers/AppContent/Sidebar/index.tsx
diff --git a/packages/console/src/components/AppContent/components/Sidebar/utils.ts b/packages/console/src/containers/AppContent/Sidebar/utils.ts
similarity index 100%
rename from packages/console/src/components/AppContent/components/Sidebar/utils.ts
rename to packages/console/src/containers/AppContent/Sidebar/utils.ts
diff --git a/packages/console/src/containers/AppContent/index.module.scss b/packages/console/src/containers/AppContent/index.module.scss
new file mode 100644
index 000000000..1c9b8c2f3
--- /dev/null
+++ b/packages/console/src/containers/AppContent/index.module.scss
@@ -0,0 +1,17 @@
+@use '@/scss/underscore' as _;
+
+.content {
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.main {
+  flex-grow: 1;
+  padding: 0 _.unit(2);
+  overflow-y: scroll;
+
+  > * {
+    @include _.main-content-width;
+  }
+}
diff --git a/packages/console/src/containers/AppContent/index.tsx b/packages/console/src/containers/AppContent/index.tsx
new file mode 100644
index 000000000..24481d633
--- /dev/null
+++ b/packages/console/src/containers/AppContent/index.tsx
@@ -0,0 +1,20 @@
+import { Outlet, useOutletContext } from 'react-router-dom';
+
+import type { AppLayoutOutletContext } from '../AppLayout/types';
+import Sidebar from './Sidebar';
+import * as styles from './index.module.scss';
+
+const AppContent = () => {
+  const { scrollableContent } = useOutletContext<AppLayoutOutletContext>();
+
+  return (
+    <div className={styles.content}>
+      <Sidebar />
+      <div ref={scrollableContent} className={styles.main}>
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export default AppContent;
diff --git a/packages/console/src/components/AppContent/components/Topbar/index.module.scss b/packages/console/src/containers/AppLayout/components/Topbar/index.module.scss
similarity index 100%
rename from packages/console/src/components/AppContent/components/Topbar/index.module.scss
rename to packages/console/src/containers/AppLayout/components/Topbar/index.module.scss
diff --git a/packages/console/src/components/AppContent/components/Topbar/index.tsx b/packages/console/src/containers/AppLayout/components/Topbar/index.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/Topbar/index.tsx
rename to packages/console/src/containers/AppLayout/components/Topbar/index.tsx
diff --git a/packages/console/src/components/AppContent/components/UserInfo/index.module.scss b/packages/console/src/containers/AppLayout/components/UserInfo/index.module.scss
similarity index 100%
rename from packages/console/src/components/AppContent/components/UserInfo/index.module.scss
rename to packages/console/src/containers/AppLayout/components/UserInfo/index.module.scss
diff --git a/packages/console/src/components/AppContent/components/UserInfo/index.tsx b/packages/console/src/containers/AppLayout/components/UserInfo/index.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/UserInfo/index.tsx
rename to packages/console/src/containers/AppLayout/components/UserInfo/index.tsx
diff --git a/packages/console/src/components/AppContent/components/UserInfoSkeleton/index.module.scss b/packages/console/src/containers/AppLayout/components/UserInfoSkeleton/index.module.scss
similarity index 100%
rename from packages/console/src/components/AppContent/components/UserInfoSkeleton/index.module.scss
rename to packages/console/src/containers/AppLayout/components/UserInfoSkeleton/index.module.scss
diff --git a/packages/console/src/components/AppContent/components/UserInfoSkeleton/index.tsx b/packages/console/src/containers/AppLayout/components/UserInfoSkeleton/index.tsx
similarity index 100%
rename from packages/console/src/components/AppContent/components/UserInfoSkeleton/index.tsx
rename to packages/console/src/containers/AppLayout/components/UserInfoSkeleton/index.tsx
diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/containers/AppLayout/index.module.scss
similarity index 54%
rename from packages/console/src/components/AppContent/index.module.scss
rename to packages/console/src/containers/AppLayout/index.module.scss
index ca0ad9f23..f7cf86777 100644
--- a/packages/console/src/components/AppContent/index.module.scss
+++ b/packages/console/src/containers/AppLayout/index.module.scss
@@ -11,19 +11,3 @@
 .topbarShadow {
   box-shadow: var(--shadow-2);
 }
-
-.content {
-  flex-grow: 1;
-  display: flex;
-  overflow: hidden;
-}
-
-.main {
-  flex-grow: 1;
-  padding: 0 _.unit(2);
-  overflow-y: scroll;
-
-  > * {
-    @include _.main-content-width;
-  }
-}
diff --git a/packages/console/src/components/AppContent/index.tsx b/packages/console/src/containers/AppLayout/index.tsx
similarity index 83%
rename from packages/console/src/components/AppContent/index.tsx
rename to packages/console/src/containers/AppLayout/index.tsx
index dc37de3d1..375a4edfd 100644
--- a/packages/console/src/components/AppContent/index.tsx
+++ b/packages/console/src/containers/AppLayout/index.tsx
@@ -11,12 +11,13 @@ import useConfigs from '@/hooks/use-configs';
 import useScroll from '@/hooks/use-scroll';
 import useUserPreferences from '@/hooks/use-user-preferences';
 
-import Sidebar, { getPath } from './components/Sidebar';
-import { useSidebarMenuItems } from './components/Sidebar/hook';
+import { getPath } from '../AppContent/Sidebar';
+import { useSidebarMenuItems } from '../AppContent/Sidebar/hook';
 import Topbar from './components/Topbar';
 import * as styles from './index.module.scss';
+import { AppLayoutOutletContext } from './types';
 
-const AppContent = () => {
+const AppLayout = () => {
   const { isAuthenticated, isLoading: isLogtoLoading, error, signIn } = useLogto();
   const href = useHref('/callback');
   const { isLoading: isPreferencesLoading } = useUserPreferences();
@@ -26,8 +27,8 @@ const AppContent = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { firstItem } = useSidebarMenuItems();
-  const mainRef = useRef<HTMLDivElement>(null);
-  const { scrollTop } = useScroll(mainRef.current);
+  const scrollableContent = useRef<HTMLDivElement>(null);
+  const { scrollTop } = useScroll(scrollableContent.current);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   useEffect(() => {
@@ -62,14 +63,9 @@ const AppContent = () => {
   return (
     <div className={styles.app}>
       <Topbar className={conditional(scrollTop && styles.topbarShadow)} />
-      <div className={styles.content}>
-        <Sidebar />
-        <div ref={mainRef} className={styles.main}>
-          <Outlet />
-        </div>
-      </div>
+      <Outlet context={{ scrollableContent } satisfies AppLayoutOutletContext} />
     </div>
   );
 };
 
-export default AppContent;
+export default AppLayout;
diff --git a/packages/console/src/containers/AppLayout/types.ts b/packages/console/src/containers/AppLayout/types.ts
new file mode 100644
index 000000000..1f133ab46
--- /dev/null
+++ b/packages/console/src/containers/AppLayout/types.ts
@@ -0,0 +1,5 @@
+import type { RefObject } from 'react';
+
+export type AppLayoutOutletContext = {
+  scrollableContent: RefObject<HTMLDivElement>;
+};
diff --git a/packages/console/src/components/ErrorBoundary/index.tsx b/packages/console/src/containers/ErrorBoundary/index.tsx
similarity index 95%
rename from packages/console/src/components/ErrorBoundary/index.tsx
rename to packages/console/src/containers/ErrorBoundary/index.tsx
index ea3db40a6..e2fbdf779 100644
--- a/packages/console/src/components/ErrorBoundary/index.tsx
+++ b/packages/console/src/containers/ErrorBoundary/index.tsx
@@ -2,7 +2,7 @@ import { conditional } from '@silverhand/essentials';
 import type { ReactNode } from 'react';
 import { Component } from 'react';
 
-import AppError from '../AppError';
+import AppError from '../../components/AppError';
 
 type Props = {
   children: ReactNode;
diff --git a/packages/console/src/pages/CloudPreview/index.tsx b/packages/console/src/pages/CloudPreview/index.tsx
new file mode 100644
index 000000000..c41fcdf8f
--- /dev/null
+++ b/packages/console/src/pages/CloudPreview/index.tsx
@@ -0,0 +1,5 @@
+const CloudPreview = () => {
+  return <div>CloudPreview(WIP)</div>;
+};
+
+export default CloudPreview;