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,32 +44,29 @@ 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>
-          </div>
-          {loadingState.isLoading ? (
-            <div className="py-4 w-full flex flex-row justify-center items-center">
-              <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
-              loading
-            </div>
-          ) : workspaceList.length === 0 ? (
-            <div className="w-full flex flex-col justify-center items-center">
-              <Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
-              <p className="mt-4 text-xl text-gray-600">Oops, no workspace.</p>
-              <button
-                className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
-                onClick={handleCreateWorkspaceButtonClick}
-              >
-                <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
-              </button>
-            </div>
-          ) : (
-            <WorkspaceListView workspaceList={workspaceList} />
-          )}
+      <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>
         </div>
+        {loadingState.isLoading ? (
+          <div className="py-4 w-full flex flex-row justify-center items-center">
+            <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
+            loading
+          </div>
+        ) : workspaceList.length === 0 ? (
+          <div className="w-full flex flex-col justify-center items-center">
+            <Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
+            <p className="mt-4 text-xl text-gray-600">Oops, no workspace.</p>
+            <button
+              className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
+              onClick={handleCreateWorkspaceButtonClick}
+            >
+              <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
+            </button>
+          </div>
+        ) : (
+          <WorkspaceListView workspaceList={workspaceList} />
+        )}
       </div>
 
       {state.showCreateWorkspaceDialog && (

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,11 +35,8 @@ 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 className="w-full pt-24 text-center font-mono text-xl">
+      <p>{state?.errMessage}</p>
     </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,34 +60,32 @@ 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">
-            <span className="mr-3 text-gray-500 font-mono">Email: </span>
-            {user?.email}
-          </p>
-          <div className="leading-8 flex flex-row justify-start items-center">
-            <span className="mr-3 text-gray-500 font-mono">Password: </span>
-            <Button variant="soft" onClick={handleChangePasswordBtnClick}>
-              Change
-            </Button>
-          </div>
-          <div className="leading-8 flex flex-row justify-start items-center">
-            <span className="mr-3 text-gray-500 font-mono">OpenID:</span>
-            <Input type="text" className="w-48" value={user?.openId} readOnly />
-            <Tooltip title="Copy OpenID" variant="solid" placement="top">
-              <button className="-ml-6 z-1 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
-                <Icon.Clipboard className="w-4 h-auto" />
-              </button>
-            </Tooltip>
-            <Button className="!ml-6" variant="soft" color="warning" onClick={handleResetOpenIdBtnClick}>
-              Reset
-            </Button>
-          </div>
+      <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">
+          <span className="mr-3 text-gray-500 font-mono">Email: </span>
+          {user?.email}
+        </p>
+        <div className="leading-8 flex flex-row justify-start items-center">
+          <span className="mr-3 text-gray-500 font-mono">Password: </span>
+          <Button variant="soft" onClick={handleChangePasswordBtnClick}>
+            Change
+          </Button>
+        </div>
+        <div className="leading-8 flex flex-row justify-start items-center">
+          <span className="mr-3 text-gray-500 font-mono">OpenID:</span>
+          <Input type="text" className="w-48" value={user?.openId} readOnly />
+          <Tooltip title="Copy OpenID" variant="solid" placement="top">
+            <button className="-ml-6 z-1 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
+              <Icon.Clipboard className="w-4 h-auto" />
+            </button>
+          </Tooltip>
+          <Button className="!ml-6" variant="soft" color="warning" onClick={handleResetOpenIdBtnClick}>
+            Reset
+          </Button>
         </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,92 +71,89 @@ 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">
-              <NavLink
-                to="#shortcuts"
-                className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
-                  location.hash === "#shortcuts" && "!border-b-black text-black"
-                }`}
-              >
-                Shortcuts
-              </NavLink>
-              <NavLink
-                to="#members"
-                className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
-                  location.hash === "#members" && "!border-b-black text-black"
-                }`}
-              >
-                Members
-              </NavLink>
-              <NavLink
-                to="#setting"
-                className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
-                  location.hash === "#setting" && "!border-b-black text-black"
-                }`}
-              >
-                Setting
-              </NavLink>
-            </div>
-            <div>
-              <Dropdown
-                trigger={
-                  <button className="w-32 flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow">
-                    <Icon.Plus className="w-4 h-auto mr-1" /> Add new...
+      <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">
+            <NavLink
+              to="#shortcuts"
+              className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
+                location.hash === "#shortcuts" && "!border-b-black text-black"
+              }`}
+            >
+              Shortcuts
+            </NavLink>
+            <NavLink
+              to="#members"
+              className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
+                location.hash === "#members" && "!border-b-black text-black"
+              }`}
+            >
+              Members
+            </NavLink>
+            <NavLink
+              to="#setting"
+              className={`py-1 text-gray-400 border-b-2 border-b-transparent ${
+                location.hash === "#setting" && "!border-b-black text-black"
+              }`}
+            >
+              Setting
+            </NavLink>
+          </div>
+          <div>
+            <Dropdown
+              trigger={
+                <button className="w-32 flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow">
+                  <Icon.Plus className="w-4 h-auto mr-1" /> Add new...
+                </button>
+              }
+              actions={
+                <>
+                  <button
+                    className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
+                    onClick={handleCreateShortcutButtonClick}
+                  >
+                    Shortcut
                   </button>
-                }
-                actions={
-                  <>
+                  {workspaceUser.role === "ADMIN" && (
                     <button
                       className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
-                      onClick={handleCreateShortcutButtonClick}
+                      onClick={handleUpsertWorkspaceMemberButtonClick}
                     >
-                      Shortcut
+                      Member
                     </button>
-                    {workspaceUser.role === "ADMIN" && (
-                      <button
-                        className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
-                        onClick={handleUpsertWorkspaceMemberButtonClick}
-                      >
-                        Member
-                      </button>
-                    )}
-                  </>
-                }
-                actionsClassName="!w-32"
-              />
-            </div>
+                  )}
+                </>
+              }
+              actionsClassName="!w-32"
+            />
           </div>
-          {loadingState.isLoading ? (
-            <div className="py-4 w-full flex flex-row justify-center items-center">
-              <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
-              loading
-            </div>
-          ) : (
-            <>
-              {location.hash === "#shortcuts" &&
-                (shortcutList.length === 0 ? (
-                  <div className="w-full flex flex-col justify-center items-center">
-                    <Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
-                    <p className="mt-4 text-xl text-gray-600">Oops, no shortcut.</p>
-                    <button
-                      className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
-                      onClick={handleCreateShortcutButtonClick}
-                    >
-                      <Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
-                    </button>
-                  </div>
-                ) : (
-                  <ShortcutListView workspaceId={workspace.id} shortcutList={shortcutList} />
-                ))}
-              {location.hash === "#members" && <MemberListView workspaceId={workspace.id} />}
-              {location.hash === "#setting" && <WorkspaceSetting workspaceId={workspace.id} />}
-            </>
-          )}
         </div>
+        {loadingState.isLoading ? (
+          <div className="py-4 w-full flex flex-row justify-center items-center">
+            <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
+            loading
+          </div>
+        ) : (
+          <>
+            {location.hash === "#shortcuts" &&
+              (shortcutList.length === 0 ? (
+                <div className="w-full flex flex-col justify-center items-center">
+                  <Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
+                  <p className="mt-4 text-xl text-gray-600">Oops, no shortcut.</p>
+                  <button
+                    className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
+                    onClick={handleCreateShortcutButtonClick}
+                  >
+                    <Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
+                  </button>
+                </div>
+              ) : (
+                <ShortcutListView workspaceId={workspace.id} shortcutList={shortcutList} />
+              ))}
+            {location.hash === "#members" && <MemberListView workspaceId={workspace.id} />}
+            {location.hash === "#setting" && <WorkspaceSetting workspaceId={workspace.id} />}
+          </>
+        )}
       </div>
 
       {state.showCreateShortcutDialog && (

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,52 +15,58 @@ const router = createBrowserRouter([
   },
   {
     path: "/",
-    element: <Home />,
-    loader: async () => {
-      try {
-        await userService.initialState();
-      } catch (error) {
-        // do nth
-      }
+    element: <Root />,
+    children: [
+      {
+        path: "",
+        element: <Home />,
+        loader: async () => {
+          try {
+            await userService.initialState();
+          } catch (error) {
+            // do nth
+          }
 
-      const { user } = userService.getState();
-      if (isNullorUndefined(user)) {
-        return redirect("/user/auth");
-      }
-    },
-  },
-  {
-    path: "/account",
-    element: <UserDetail />,
-    loader: async () => {
-      try {
-        await userService.initialState();
-      } catch (error) {
-        // do nth
-      }
+          const { user } = userService.getState();
+          if (isNullorUndefined(user)) {
+            return redirect("/user/auth");
+          }
+        },
+      },
+      {
+        path: "/account",
+        element: <UserDetail />,
+        loader: async () => {
+          try {
+            await userService.initialState();
+          } catch (error) {
+            // do nth
+          }
 
-      const { user } = userService.getState();
-      if (isNullorUndefined(user)) {
-        return redirect("/user/auth");
-      }
-    },
-  },
-  {
-    path: "/:workspaceName",
-    element: <WorkspaceDetail />,
-    loader: async () => {
-      try {
-        await userService.initialState();
-        await workspaceService.fetchWorkspaceList();
-      } catch (error) {
-        // do nth
-      }
+          const { user } = userService.getState();
+          if (isNullorUndefined(user)) {
+            return redirect("/user/auth");
+          }
+        },
+      },
+      {
+        path: "/:workspaceName",
+        element: <WorkspaceDetail />,
+        loader: async () => {
+          try {
+            await userService.initialState();
+            await workspaceService.fetchWorkspaceList();
+          } catch (error) {
+            // do nth
+          }
 
-      const { user } = userService.getState();
-      if (isNullorUndefined(user)) {
-        return redirect("/user/auth");
-      }
-    },
+          const { user } = userService.getState();
+          if (isNullorUndefined(user)) {
+            return redirect("/user/auth");
+          }
+        },
+      },
+    ],
   },
   {
     path: "/:workspaceName/:shortcutName",