refator: sd

app/components/sd/sd-sidebar.tsx

@@ -0,0 +1,65 @@
+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";
+import ReturnIcon from "@/app/icons/return.svg";
+import Locale from "@/app/locales";
+
+import { Path, REPO_URL } from "@/app/constant";
+
+import { useNavigate } from "react-router-dom";
+import dynamic from "next/dynamic";
+import {
+  SideBarContainer,
+  SideBarBody,
+  useDragSideBar,
+  useHotKey,
+} from "@/app/components/sidebar";
+
+const SdPanel = dynamic(
+  async () => (await import("@/app/components/sd/sd-panel")).SdPanel,
+  {
+    loading: () => null,
+  },
+);
+
+export function SideBar(props: { className?: string }) {
+  useHotKey();
+  const { onDragStart, shouldNarrow } = useDragSideBar();
+  const navigate = useNavigate();
+
+  return (
+    <SideBarContainer
+      onDragStart={onDragStart}
+      shouldNarrow={shouldNarrow}
+      {...props}
+    >
+      <div className={styles["sidebar-header"]} data-tauri-drag-region>
+        <div className={styles["sidebar-title"]} data-tauri-drag-region>
+          <IconButton
+            icon={<ReturnIcon />}
+            bordered
+            title={Locale.Chat.Actions.ChatList}
+            onClick={() => navigate(Path.Chat)}
+          />
+        </div>
+        <div className={styles["sidebar-logo"] + " no-dark"}>
+          <SDIcon width={38} height={38} />
+        </div>
+      </div>
+      <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>
+    </SideBarContainer>
+  );
+}