feat: add mask screen

app/components/home.tsx

@@ -12,7 +12,7 @@ import LoadingIcon from "../icons/three-dots.svg";
 import { getCSSVar, useMobileScreen } from "../utils";
 
 import dynamic from "next/dynamic";
-import { Path } from "../constant";
+import { Path, SlotID } from "../constant";
 import { ErrorBoundary } from "./error";
 
 import {
@@ -23,6 +23,7 @@ import {
 } from "react-router-dom";
 import { SideBar } from "./sidebar";
 import { useAppConfig } from "../store/config";
+import { NewChat } from "./new-chat";
 
 export function Loading(props: { noLogo?: boolean }) {
   return (
@@ -82,39 +83,29 @@ const useHasHydrated = () => {
   return hasHydrated;
 };
 
-function WideScreen() {
+function Screen() {
   const config = useAppConfig();
+  const location = useLocation();
+  const isHome = location.pathname === Path.Home;
+  const isMobileScreen = useMobileScreen();
 
   return (
     <div
-      className={`${
-        config.tightBorder ? styles["tight-container"] : styles.container
-      }`}
+      className={
+        styles.container +
+        ` ${
+          config.tightBorder && !isMobileScreen
+            ? styles["tight-container"]
+            : styles.container
+        }`
+      }
     >
-      <SideBar />
-
-      <div className={styles["window-content"]}>
-        <Routes>
-          <Route path={Path.Home} element={<Chat />} />
-          <Route path={Path.Chat} element={<Chat />} />
-          <Route path={Path.Settings} element={<Settings />} />
-        </Routes>
-      </div>
-    </div>
-  );
-}
-
-function MobileScreen() {
-  const location = useLocation();
-  const isHome = location.pathname === Path.Home;
-
-  return (
-    <div className={styles.container}>
       <SideBar className={isHome ? styles["sidebar-show"] : ""} />
 
-      <div className={styles["window-content"]}>
+      <div className={styles["window-content"]} id={SlotID.AppBody}>
         <Routes>
-          <Route path={Path.Home} element={null} />
+          <Route path={Path.Home} element={<Chat />} />
+          <Route path={Path.NewChat} element={<NewChat />} />
           <Route path={Path.Chat} element={<Chat />} />
           <Route path={Path.Settings} element={<Settings />} />
         </Routes>
@@ -124,7 +115,6 @@ function MobileScreen() {
 }
 
 export function Home() {
-  const isMobileScreen = useMobileScreen();
   useSwitchTheme();
 
   if (!useHasHydrated()) {
@@ -133,7 +123,9 @@ export function Home() {
 
   return (
     <ErrorBoundary>
-      <Router>{isMobileScreen ? <MobileScreen /> : <WideScreen />}</Router>
+      <Router>
+        <Screen />
+      </Router>
     </ErrorBoundary>
   );
 }