feat: add side bar mask entry

app/components/home.module.scss

@@ -48,6 +48,19 @@
   box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
   position: relative;
   transition: width ease 0.05s;
+
+  .sidebar-header-bar {
+    display: flex;
+    margin-bottom: 20px;
+
+    .sidebar-bar-button {
+      flex-grow: 1;
+
+      &:not(:last-child) {
+        margin-right: 10px;
+      }
+    }
+  }
 }
 
 .sidebar-drag {
@@ -215,6 +228,17 @@
     justify-content: center;
   }
 
+  .sidebar-header-bar {
+    flex-direction: column;
+
+    .sidebar-bar-button {
+      &:not(:last-child) {
+        margin-right: 0;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
   .chat-item {
     padding: 0;
     min-height: 50px;

app/components/sidebar.tsx

@@ -8,6 +8,9 @@ import GithubIcon from "../icons/github.svg";
 import ChatGptIcon from "../icons/chatgpt.svg";
 import AddIcon from "../icons/add.svg";
 import CloseIcon from "../icons/close.svg";
+import MaskIcon from "../icons/mask.svg";
+import PluginIcon from "../icons/plugin.svg";
+
 import Locale from "../locales";
 
 import { useAppConfig, useChatStore } from "../store";
@@ -23,6 +26,7 @@ import {
 import { Link, useNavigate } from "react-router-dom";
 import { useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
+import { showToast } from "./ui-lib";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
@@ -99,6 +103,23 @@ export function SideBar(props: { className?: string }) {
         </div>
       </div>
 
+      <div className={styles["sidebar-header-bar"]}>
+        <IconButton
+          icon={<MaskIcon />}
+          text="Mask"
+          className={styles["sidebar-bar-button"]}
+          onClick={() => navigate(Path.Masks)}
+          shadow
+        />
+        <IconButton
+          icon={<PluginIcon />}
+          text="Plugins"
+          className={styles["sidebar-bar-button"]}
+          onClick={() => showToast(Locale.WIP)}
+          shadow
+        />
+      </div>
+
       <div
         className={styles["sidebar-body"]}
         onClick={(e) => {

app/components/ui-lib.module.scss

@@ -143,7 +143,7 @@
 
 .toast-container {
   position: fixed;
-  bottom: 10vh;
+  bottom: 5vh;
   left: 0;
   width: 100vw;
   display: flex;