fix: sd mobile

app/components/sd/index.tsx

@@ -1,2 +1,3 @@
 export * from "./sd";
 export * from "./sd-panel";
+export * from "./sd-new";

app/components/sd/sd-new.tsx

@@ -0,0 +1,85 @@
+import homeStyles from "@/app/components/home.module.scss";
+
+import { IconButton } from "@/app/components/button";
+import GithubIcon from "@/app/icons/github.svg";
+import ReturnIcon from "@/app/icons/return.svg";
+import Locale from "@/app/locales";
+import HistoryIcon from "@/app/icons/history.svg";
+
+import { Path, REPO_URL } from "@/app/constant";
+
+import { useNavigate } from "react-router-dom";
+import dynamic from "next/dynamic";
+import {
+  SideBarContainer,
+  SideBarBody,
+  SideBarTail,
+  useDragSideBar,
+  useHotKey,
+} from "@/app/components/sidebar";
+
+const SdPanel = dynamic(
+  async () => (await import("@/app/components/sd")).SdPanel,
+  {
+    loading: () => null,
+  },
+);
+
+export function SdNew() {
+  useHotKey();
+  const { onDragStart, shouldNarrow } = useDragSideBar();
+  const navigate = useNavigate();
+  return (
+    <SideBarContainer
+      onDragStart={onDragStart}
+      shouldNarrow={shouldNarrow}
+      className={homeStyles["sidebar-show"]}
+    >
+      <div
+        className="window-header"
+        data-tauri-drag-region
+        style={{
+          paddingLeft: 0,
+          paddingRight: 0,
+        }}
+      >
+        {
+          <div className="window-actions">
+            <div className="window-action-button">
+              <IconButton
+                icon={<ReturnIcon />}
+                bordered
+                title={Locale.Sd.Actions.ReturnHome}
+                onClick={() => navigate(Path.Home)}
+              />
+            </div>
+          </div>
+        }
+
+        <div className={`window-header-title`}>
+          <div className={`window-header-main-title`}>Stability</div>
+        </div>
+        <div className="window-actions">
+          <div className="window-action-button">
+            <IconButton
+              icon={<HistoryIcon />}
+              bordered
+              title={Locale.Sd.Actions.History}
+              onClick={() => navigate(Path.Sd)}
+            />
+          </div>
+        </div>
+      </div>
+      <SideBarBody>
+        <SdPanel />
+      </SideBarBody>
+      <SideBarTail
+        primaryAction={
+          <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
+            <IconButton icon={<GithubIcon />} shadow />
+          </a>
+        }
+      />
+    </SideBarContainer>
+  );
+}

app/components/sd/sd-sidebar.tsx

@@ -1,5 +1,3 @@
-import styles from "@/app/components/home.module.scss";
-
 import { IconButton } from "@/app/components/button";
 import GithubIcon from "@/app/icons/github.svg";
 import SDIcon from "@/app/icons/sd.svg";
@@ -13,12 +11,14 @@ import dynamic from "next/dynamic";
 import {
   SideBarContainer,
   SideBarBody,
+  SideBarHeader,
+  SideBarTail,
   useDragSideBar,
   useHotKey,
 } from "@/app/components/sidebar";
 
 const SdPanel = dynamic(
-  async () => (await import("@/app/components/sd/sd-panel")).SdPanel,
+  async () => (await import("@/app/components/sd")).SdPanel,
   {
     loading: () => null,
   },
@@ -35,31 +35,27 @@ export function SideBar(props: { className?: string }) {
       shouldNarrow={shouldNarrow}
       {...props}
     >
-      <div className={styles["sidebar-header"]} data-tauri-drag-region>
-        <div className={styles["sidebar-title"]} data-tauri-drag-region>
+      <SideBarHeader
+        title={
           <IconButton
             icon={<ReturnIcon />}
             bordered
-            title={Locale.Chat.Actions.ChatList}
-            onClick={() => navigate(Path.Chat)}
+            title={Locale.Sd.Actions.ReturnHome}
+            onClick={() => navigate(Path.Home)}
           />
-        </div>
-        <div className={styles["sidebar-logo"] + " no-dark"}>
-          <SDIcon width={38} height={38} />
-        </div>
-      </div>
+        }
+        logo={<SDIcon width={38} height={38} />}
+      ></SideBarHeader>
       <SideBarBody>
         <SdPanel />
       </SideBarBody>
-      <div className={styles["sidebar-tail"]}>
-        <div className={styles["sidebar-actions"]}>
-          <div className={styles["sidebar-action"]}>
-            <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
-              <IconButton icon={<GithubIcon />} shadow />
-            </a>
-          </div>
-        </div>
-      </div>
+      <SideBarTail
+        primaryAction={
+          <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
+            <IconButton icon={<GithubIcon />} shadow />
+          </a>
+        }
+      />
     </SideBarContainer>
   );
 }

app/components/sd/sd.tsx

@@ -111,7 +111,7 @@ export function Sd() {
                     icon={<ReturnIcon />}
                     bordered
                     title={Locale.Chat.Actions.ChatList}
-                    onClick={() => navigate(Path.SdPanel)}
+                    onClick={() => navigate(Path.SdNew)}
                   />
                 </div>
               </div>