feat: add SD page switching

app/components/home.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { Sd } from "@/app/components/sd";
+
 require("../polyfill");
 
 import { useState, useEffect } from "react";
@@ -159,6 +161,7 @@ function Screen() {
               <Route path={Path.NewChat} element={<NewChat />} />
               <Route path={Path.Masks} element={<MaskPage />} />
               <Route path={Path.Chat} element={<Chat />} />
+              <Route path={Path.Sd} element={<Sd />} />
               <Route path={Path.Settings} element={<Settings />} />
             </Routes>
           </div>

app/components/sd-list.tsx

@@ -0,0 +1,3 @@
+export function SdList() {
+  return <div>sd-list</div>;
+}

app/components/sd.tsx

@@ -0,0 +1,3 @@
+export function Sd() {
+  return <div>sd</div>;
+}

app/components/sidebar.tsx

@@ -23,18 +23,24 @@ import {
   MIN_SIDEBAR_WIDTH,
   NARROW_SIDEBAR_WIDTH,
   Path,
+  PLUGINS,
   REPO_URL,
 } from "../constant";
 
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { isIOS, useMobileScreen } from "../utils";
 import dynamic from "next/dynamic";
 import { Selector, showConfirm, showToast } from "./ui-lib";
+import de from "@/app/locales/de";
 
 const ChatList = dynamic(async () => (await import("./chat-list")).ChatList, {
   loading: () => null,
 });
 
+const SdList = dynamic(async () => (await import("./sd-list")).SdList, {
+  loading: () => null,
+});
+
 function useHotKey() {
   const chatStore = useChatStore();
 
@@ -141,9 +147,20 @@ export function SideBar(props: { className?: string }) {
     [isMobileScreen],
   );
   const [showPluginSelector, setShowPluginSelector] = useState(false);
+  const location = useLocation();
 
   useHotKey();
 
+  let bodyComponent: React.JSX.Element;
+  let isChat: boolean;
+  switch (location.pathname) {
+    case Path.Sd:
+      bodyComponent = <SdList />;
+      break;
+    default:
+      isChat = true;
+      bodyComponent = <ChatList narrow={shouldNarrow} />;
+  }
   return (
     <div
       className={`${styles.sidebar} ${props.className} ${
@@ -192,12 +209,12 @@ export function SideBar(props: { className?: string }) {
       <div
         className={styles["sidebar-body"]}
         onClick={(e) => {
-          if (e.target === e.currentTarget) {
+          if (isChat && e.target === e.currentTarget) {
             navigate(Path.Home);
           }
         }}
       >
-        <ChatList narrow={shouldNarrow} />
+        {bodyComponent}
       </div>
 
       <div className={styles["sidebar-tail"]}>
@@ -254,11 +271,16 @@ export function SideBar(props: { className?: string }) {
               value: "-",
               disable: true,
             },
-            { title: "Stable Diffusion", value: "sd" },
+            ...PLUGINS.map((item) => {
+              return {
+                title: item.name,
+                value: item.path,
+              };
+            }),
           ]}
           onClose={() => setShowPluginSelector(false)}
           onSelection={(s) => {
-            console.log("go to page: ", s);
+            navigate(s[0], { state: { fromHome: true } });
           }}
         />
       )}

app/constant.ts

@@ -21,6 +21,7 @@ export enum Path {
   NewChat = "/new-chat",
   Masks = "/masks",
   Auth = "/auth",
+  Sd = "/sd",
 }
 
 export enum ApiPath {
@@ -213,3 +214,5 @@ export const internalAllowedWebDavEndpoints = [
   "https://webdav.yandex.com",
   "https://app.koofr.net/dav/Koofr",
 ];
+
+export const PLUGINS = [{ name: "Stable Diffusion", path: Path.Sd }];