feat: maskpage&newchatpage adapt new ui framework done

app/containers/Sidebar/index.tsx

@@ -1,42 +1,25 @@
-import DragIcon from "@/app/icons/drag.svg";
-import DiscoverIcon from "@/app/icons/discoverActive.svg";
-import AssistantActiveIcon from "@/app/icons/assistantActive.svg";
 import GitHubIcon from "@/app/icons/githubIcon.svg";
-import SettingIcon from "@/app/icons/settingActive.svg";
+import DiscoverIcon from "@/app/icons/discoverActive.svg";
 import DiscoverInactiveIcon from "@/app/icons/discoverInactive.svg";
-import AssistantInactiveIcon from "@/app/icons/assistantInactive.svg";
+import DiscoverMobileActive from "@/app/icons/discoverMobileActive.svg";
+import DiscoverMobileInactive from "@/app/icons/discoverMobileInactive.svg";
+import SettingIcon from "@/app/icons/settingActive.svg";
 import SettingInactiveIcon from "@/app/icons/settingInactive.svg";
 import SettingMobileActive from "@/app/icons/settingMobileActive.svg";
-import DiscoverMobileActive from "@/app/icons/discoverMobileActive.svg";
+import SettingMobileInactive from "@/app/icons/settingMobileInactive.svg";
+import AssistantActiveIcon from "@/app/icons/assistantActive.svg";
+import AssistantInactiveIcon from "@/app/icons/assistantInactive.svg";
 import AssistantMobileActive from "@/app/icons/assistantMobileActive.svg";
 import AssistantMobileInactive from "@/app/icons/assistantMobileInactive.svg";
 
 import { useAppConfig } from "@/app/store";
 import { Path, REPO_URL } from "@/app/constant";
 import { useNavigate, useLocation } from "react-router-dom";
-import dynamic from "next/dynamic";
 import useHotKey from "@/app/hooks/useHotKey";
-import useDragSideBar from "@/app/hooks/useDragSideBar";
 import useMobileScreen from "@/app/hooks/useMobileScreen";
-import MenuWrapper from "./MenuWrapper";
 import ActionsBar from "@/app/components/ActionsBar";
 
-const SessionList = MenuWrapper(
-  dynamic(async () => await import("./SessionList"), {
-    loading: () => null,
-  }),
-);
-
-const SettingList = MenuWrapper(
-  dynamic(async () => await import("./SettingList"), {
-    loading: () => null,
-  }),
-);
-
 export function SideBar(props: { className?: string }) {
-  // drag side bar
-  const { onDragStart } = useDragSideBar();
-
   const navigate = useNavigate();
   const loc = useLocation();
 
@@ -56,18 +39,15 @@ export function SideBar(props: { className?: string }) {
       selectedTab = Path.Settings;
       break;
     default:
-      selectedTab = Path.Chat;
+      selectedTab = Path.Home;
   }
 
-  let containerClassName = "relative flex h-[100%] w-[100%]";
+  let containerClassName = "relative flex h-[100%]";
   let tabActionsClassName = "2xl:px-5 xl:px-4 px-2 py-6";
-  let menuClassName =
-    "max-md:px-4 max-md:pb-4 rounded-md my-2.5 bg-gray-50 flex-1";
 
   if (isMobileScreen) {
     containerClassName = "flex flex-col-reverse w-[100%] h-[100%]";
     tabActionsClassName = "bg-gray-100 rounded-tl-md rounded-tr-md h-mobile";
-    menuClassName = `flex-1 px-4`;
   }
 
   return (
@@ -81,12 +61,12 @@ export function SideBar(props: { className?: string }) {
               active: <DiscoverIcon />,
               inactive: <DiscoverInactiveIcon />,
               mobileActive: <DiscoverMobileActive />,
-              mobileInactive: <DiscoverInactiveIcon />,
+              mobileInactive: <DiscoverMobileInactive />,
             },
             title: "Discover",
           },
           {
-            id: Path.Chat,
+            id: Path.Home,
             icons: {
               active: <AssistantActiveIcon />,
               inactive: <AssistantInactiveIcon />,
@@ -106,7 +86,7 @@ export function SideBar(props: { className?: string }) {
               active: <SettingIcon />,
               inactive: <SettingInactiveIcon />,
               mobileActive: <SettingMobileActive />,
-              mobileInactive: <SettingInactiveIcon />,
+              mobileInactive: <SettingMobileInactive />,
             },
             className: "p-2",
             title: "Settrings",
@@ -127,36 +107,16 @@ export function SideBar(props: { className?: string }) {
         }}
         groups={{
           normal: [
-            [Path.Chat, Path.Masks],
+            [Path.Home, Path.Masks],
             ["github", Path.Settings],
           ],
-          mobile: [[Path.Chat, Path.Masks, Path.Settings]],
+          mobile: [[Path.Home, Path.Masks, Path.Settings]],
         }}
         selected={selectedTab}
         className={`${
           isMobileScreen ? "justify-around" : "flex-col"
         } ${tabActionsClassName}`}
       />
-
-      <SessionList
-        show={selectedTab === Path.Chat}
-        wrapperClassName={menuClassName}
-      />
-      <SettingList
-        show={selectedTab === Path.Settings}
-        wrapperClassName={menuClassName}
-      />
-
-      {!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>
   );
 }