feat: maskpage&newchatpage adapt new ui framework done

app/components/Btn/index.tsx

@@ -50,7 +50,7 @@ export default function IconButton(props: {
       autoFocus={autoFocus}
     >
       {text && (
-        <div className={`text-common text-sm-title leading-4 line-clamp-1`}>
+        <div className={`font-common text-sm-title leading-4 line-clamp-1`}>
           {text}
         </div>
       )}

app/components/GlobalLoading/index.tsx

@@ -0,0 +1,18 @@
+import BotIcon from "@/app/icons/bot.svg";
+import LoadingIcon from "@/app/icons/three-dots.svg";
+
+export default function GloablLoading({
+  noLogo,
+}: {
+  noLogo?: boolean;
+  useSkeleton?: boolean;
+}) {
+  return (
+    <div
+      className={`flex flex-col justify-center items-center w-[100%] h-[100%]`}
+    >
+      {!noLogo && <BotIcon />}
+      <LoadingIcon />
+    </div>
+  );
+}

app/components/MenuWrapper/index.tsx

@@ -0,0 +1,85 @@
+import { useNavigate } from "react-router-dom";
+import { Path } from "@/app/constant";
+import useDragSideBar from "@/app/hooks/useDragSideBar";
+import useMobileScreen from "@/app/hooks/useMobileScreen";
+import {
+  ComponentType,
+  Context,
+  createContext,
+  useContext,
+  useState,
+} from "react";
+
+import DragIcon from "@/app/icons/drag.svg";
+
+export interface MenuWrapperInspectProps {
+  setShowPanel?: (v: boolean) => void;
+  showPanel?: boolean;
+}
+
+export default function MenuWrapper<
+  ListComponentProps extends MenuWrapperInspectProps,
+  PanelComponentProps extends MenuWrapperInspectProps,
+>(
+  ListComponent: ComponentType<ListComponentProps>,
+  PanelComponent: ComponentType<PanelComponentProps>,
+) {
+  return function MenuHood(props: ListComponentProps & PanelComponentProps) {
+    const [showPanel, setShowPanel] = useState(false);
+
+    const navigate = useNavigate();
+
+    const isMobileScreen = useMobileScreen();
+    // drag side bar
+    const { onDragStart } = useDragSideBar();
+
+    let containerClassName = "flex h-[100%] w-[100%]";
+    let listClassName =
+      "relative basis-sidebar h-[calc(100%-1.25rem)] pb-6 max-md:px-4 max-md:pb-4 rounded-md my-2.5 bg-gray-50";
+    let panelClassName = "flex-1 h-[100%] w-page";
+
+    if (isMobileScreen) {
+      containerClassName = "h-[100%] w-[100%] relative bg-center";
+      listClassName = `h-[100%] w-[100%] flex-1 px-4`;
+      panelClassName = `transition-all duration-300 absolute top-0 max-h-[100vh] w-[100%] ${
+        showPanel ? "left-0" : "left-[101%]"
+      } z-10`;
+    }
+
+    return (
+      <div className={`${containerClassName}`}>
+        <div
+          className={`flex flex-col px-6 ${listClassName}`}
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              navigate(Path.Home);
+            }
+          }}
+        >
+          <ListComponent
+            {...props}
+            setShowPanel={setShowPanel}
+            showPanel={showPanel}
+          />
+          {!isMobileScreen && (
+            <div
+              className={`group absolute right-0 h-[100%] flex items-center`}
+              onPointerDown={(e) => onDragStart(e as any)}
+            >
+              <div className="opacity-0 group-hover:bg-[rgba($color: #000000, $alpha: 0.01) group-hover:opacity-20">
+                <DragIcon />
+              </div>
+            </div>
+          )}
+        </div>
+        <div className={`${panelClassName}`}>
+          <PanelComponent
+            {...props}
+            setShowPanel={setShowPanel}
+            showPanel={showPanel}
+          />
+        </div>
+      </div>
+    );
+  };
+}

app/components/Screen/index.tsx

@@ -18,7 +18,6 @@ interface ScreenProps {
 export default function Screen(props: ScreenProps) {
   const location = useLocation();
   const isAuth = location.pathname === Path.Auth;
-  const isHome = location.pathname === Path.Home;
 
   const isMobileScreen = useMobileScreen();
   const isIOSMobile = useMemo(
@@ -28,16 +27,15 @@ export default function Screen(props: ScreenProps) {
 
   useListenWinResize();
 
-  let containerClassName = "flex h-[100%] w-[100%]";
-  let pageClassName = "flex-1 h-[100%] w-page";
-  let sidebarClassName = "basis-sidebar h-[100%]";
+  let containerClassName = "flex h-[100%] w-[100%] bg-center overflow-hidden";
+  let sidebarClassName = "flex-0 overflow-hidden";
+  let pageClassName = "flex-1 h-[100%] min-w-0 overflow-hidden";
 
   if (isMobileScreen) {
-    containerClassName = "h-[100%] w-[100%] relative bg-center";
-    pageClassName = `absolute top-0 h-[100%] w-[100%] ${
-      !isHome ? "left-0" : "left-[101%]"
-    } z-10`;
-    sidebarClassName = `h-[100%] w-[100%]`;
+    containerClassName =
+      "relative flex flex-col-reverse h-[100%] w-[100%] bg-center";
+    sidebarClassName = "absolute w-[100%] bottom-0 z-10";
+    pageClassName = "w-[100%] h-[100%]";
   }
 
   return (

app/components/mask.tsx

@@ -1,5 +1,4 @@
 import { IconButton } from "./button";
-import { ErrorBoundary } from "./error";
 
 import styles from "./mask.module.scss";
 
@@ -56,6 +55,7 @@ import {
   OnDragEndResponder,
 } from "@hello-pangea/dnd";
 import { getMessageTextContent } from "../utils";
+import useMobileScreen from "@/app/hooks/useMobileScreen";
 
 // drag and drop helper function
 function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {
@@ -465,9 +465,15 @@ export function MaskPage() {
     });
   };
 
+  const isMobileScreen = useMobileScreen();
+
   return (
-    <ErrorBoundary>
-      <div className={styles["mask-page"]}>
+    <>
+      <div
+        className={`${styles["mask-page"]} !bg-gray-50 ${
+          isMobileScreen ? "pb-chat-panel-mobile" : ""
+        }`}
+      >
         <div className="window-header">
           <div className="window-header-title">
             <div className="window-header-main-title">
@@ -645,6 +651,6 @@ export function MaskPage() {
           </Modal>
         </div>
       )}
-    </ErrorBoundary>
+    </>
   );
 }

app/components/new-chat.tsx

@@ -16,6 +16,7 @@ import { MaskAvatar } from "./mask";
 import { useCommand } from "../command";
 import { showConfirm } from "./ui-lib";
 import { BUILTIN_MASK_STORE } from "../masks";
+import useMobileScreen from "@/app/hooks/useMobileScreen";
 
 function MaskItem(props: { mask: Mask; onClick?: () => void }) {
   return (
@@ -110,8 +111,14 @@ export function NewChat() {
     }
   }, [groups]);
 
+  const isMobileScreen = useMobileScreen();
+
   return (
-    <div className={styles["new-chat"]}>
+    <div
+      className={`${styles["new-chat"]} !bg-gray-50 px-1 ${
+        isMobileScreen ? "pb-chat-panel-mobile" : ""
+      }`}
+    >
       <div className={styles["mask-header"]}>
         <IconButton
           icon={<LeftIcon />}