feat: update root layout

web/src/layout/Root.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router-dom";
+import Header from "../components/Header";
+
+const UserDetail: React.FC = () => {
+  return (
+    <div className="w-full h-full flex flex-col justify-start items-start">
+      <Header />
+      <Outlet />
+    </div>
+  );
+};
+
+export default UserDetail;

web/src/pages/Home.tsx

@@ -4,7 +4,6 @@ import { userService, workspaceService } from "../services";
 import { useAppSelector } from "../store";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
-import Header from "../components/Header";
 import WorkspaceListView from "../components/WorkspaceListView";
 import CreateWorkspaceDialog from "../components/CreateWorkspaceDialog";
 
@@ -45,8 +44,6 @@ const Home: React.FC = () => {
 
   return (
     <>
-      <div className="w-full h-full flex flex-col justify-start items-start">
-        <Header />
       <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
         <div className="mb-4 w-full flex flex-row justify-between items-center">
           <span className="font-mono text-gray-400">Workspace List</span>
@@ -71,7 +68,6 @@ const Home: React.FC = () => {
           <WorkspaceListView workspaceList={workspaceList} />
         )}
       </div>
-      </div>
 
       {state.showCreateWorkspaceDialog && (
         <CreateWorkspaceDialog

web/src/pages/ShortcutRedirector.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import Header from "../components/Header";
 import { getShortcutWithNameAndWorkspaceName } from "../helpers/api";
 import useLoading from "../hooks/useLoading";
 
@@ -36,12 +35,9 @@ const ShortcutRedirector: React.FC = () => {
   }, []);
 
   return loadingState.isLoading ? null : (
-    <div className="w-full h-full flex flex-col justify-start items-start">
-      <Header />
     <div className="w-full pt-24 text-center font-mono text-xl">
       <p>{state?.errMessage}</p>
     </div>
-    </div>
   );
 };
 

web/src/pages/UserDetail.tsx

@@ -2,7 +2,6 @@ import { Button, Input, Tooltip } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../store";
-import Header from "../components/Header";
 import { showCommonDialog } from "../components/Alert";
 import { userService } from "../services";
 import Icon from "../components/Icon";
@@ -61,8 +60,6 @@ const UserDetail: React.FC = () => {
 
   return (
     <>
-      <div className="w-full h-full flex flex-col justify-start items-start">
-        <Header />
       <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
         <p className="text-3xl mt-2 mb-4">{user?.displayName}</p>
         <p className="leading-8 flex flex-row justify-start items-center">
@@ -88,7 +85,7 @@ const UserDetail: React.FC = () => {
           </Button>
         </div>
       </div>
-      </div>
+
       {state.showChangePasswordDialog && (
         <ChangePasswordDialog
           onClose={() => {

web/src/pages/WorkspaceDetail.tsx

@@ -7,7 +7,6 @@ import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
 import toastHelper from "../components/Toast";
 import Dropdown from "../components/common/Dropdown";
-import Header from "../components/Header";
 import ShortcutListView from "../components/ShortcutListView";
 import MemberListView from "../components/MemberListView";
 import WorkspaceSetting from "../components/WorkspaceSetting";
@@ -72,8 +71,6 @@ const WorkspaceDetail: React.FC = () => {
 
   return (
     <>
-      <div className="w-full h-full flex flex-col justify-start items-start">
-        <Header />
       <div className="mx-auto max-w-4xl w-full px-3 pb-6 flex flex-col justify-start items-start">
         <div className="w-full flex flex-row justify-between items-center mt-4 mb-4">
           <div className="flex flex-row justify-start items-center space-x-3 sm:space-x-4">
@@ -158,7 +155,6 @@ const WorkspaceDetail: React.FC = () => {
           </>
         )}
       </div>
-      </div>
 
       {state.showCreateShortcutDialog && (
         <CreateShortcutDialog

web/src/router/index.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter, redirect } from "react-router-dom";
 import { isNullorUndefined } from "../helpers/utils";
 import { userService, workspaceService } from "../services";
+import Root from "../layout/Root";
 import Auth from "../pages/Auth";
 import Home from "../pages/Home";
 import UserDetail from "../pages/UserDetail";
@@ -14,6 +15,10 @@ const router = createBrowserRouter([
   },
   {
     path: "/",
+    element: <Root />,
+    children: [
+      {
+        path: "",
         element: <Home />,
         loader: async () => {
           try {
@@ -61,6 +66,8 @@ const router = createBrowserRouter([
           }
         },
       },
+    ],
+  },
   {
     path: "/:workspaceName/:shortcutName",
     element: <ShortcutRedirector />,