feat: improve mask ui

app/components/mask.module.scss

@@ -1,16 +1,4 @@
 @import "../styles/animation.scss";
-
-@keyframes search-in {
-  from {
-    opacity: 0;
-    transform: translateY(5vh) scaleX(0.5);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scaleX(1);
-  }
-}
-
 .mask-page {
   height: 100%;
   display: flex;
@@ -24,7 +12,7 @@
       width: 100%;
       max-width: 100%;
       margin-bottom: 20px;
-      animation: search-in ease 0.3s;
+      animation: slide-in ease 0.3s;
       height: 40px;
 
       display: flex;
@@ -33,7 +21,6 @@
         flex-grow: 1;
         max-width: 100%;
         min-width: 0;
-        animation: search-in ease 0.3s;
       }
 
       .mask-filter-lang {

app/components/new-chat.module.scss

@@ -59,10 +59,9 @@
     display: flex;
     justify-content: center;
 
-    .search-bar {
+    .more {
       font-size: 12px;
-      margin-right: 10px;
-      width: 40vw;
+      margin-left: 10px;
     }
   }
 

app/components/new-chat.tsx

@@ -5,10 +5,11 @@ import { EmojiAvatar } from "./emoji";
 import styles from "./new-chat.module.scss";
 
 import LeftIcon from "../icons/left.svg";
-import AddIcon from "../icons/lightning.svg";
+import LightningIcon from "../icons/lightning.svg";
+import EyeIcon from "../icons/eye.svg";
 
 import { useLocation, useNavigate } from "react-router-dom";
-import { createEmptyMask, Mask, useMaskStore } from "../store/mask";
+import { Mask, useMaskStore } from "../store/mask";
 import Locale from "../locales";
 import { useAppConfig, useChatStore } from "../store";
 import { MaskAvatar } from "./mask";
@@ -148,20 +149,22 @@ export function NewChat() {
       <div className={styles["sub-title"]}>{Locale.NewChat.SubTitle}</div>
 
       <div className={styles["actions"]}>
-        <input
-          className={styles["search-bar"]}
-          placeholder={Locale.NewChat.More}
-          type="text"
-          onClick={() => navigate(Path.Masks)}
-        />
-
         <IconButton
           text={Locale.NewChat.Skip}
           onClick={() => startChat()}
-          icon={<AddIcon />}
+          icon={<LightningIcon />}
           type="primary"
           shadow
         />
+
+        <IconButton
+          className={styles["more"]}
+          text={Locale.NewChat.More}
+          onClick={() => navigate(Path.Masks)}
+          icon={<EyeIcon />}
+          bordered
+          shadow
+        />
       </div>
 
       <div className={styles["masks"]}>

app/locales/cn.ts

@@ -224,7 +224,7 @@ const cn = {
     ConfirmNoShow: "确认禁用？禁用后可以随时在设置中重新启用。",
     Title: "挑选一个面具",
     SubTitle: "现在开始，与面具背后的灵魂思维碰撞",
-    More: "搜索更多",
+    More: "查看全部",
   },
 
   UI: {