From fc6fa36c15a0d57cb6180d81d315ca54883b3e2a Mon Sep 17 00:00:00 2001
From: alewin <ale@anlint.com>
Date: Fri, 7 Apr 2023 00:17:35 +0800
Subject: [PATCH] sidebar menu

---
 src/components/PromptBook.tsx |   2 +-
 src/components/Settings.tsx   |   4 +-
 src/components/Sidebar.tsx    |  66 ++++++++++++
 src/containers/StartView.tsx  |  49 +--------
 src/pages/index.tsx           | 185 ++++++++++++++++++----------------
 5 files changed, 168 insertions(+), 138 deletions(-)
 create mode 100644 src/components/Sidebar.tsx

diff --git a/src/components/PromptBook.tsx b/src/components/PromptBook.tsx
index 25a695d..0d3e694 100644
--- a/src/components/PromptBook.tsx
+++ b/src/components/PromptBook.tsx
@@ -36,7 +36,7 @@ export function PromptBook() {
 
   return (
     <div
-      className={`absolute bottom-[3.75rem] min-h-[13rem] max-h-[30rem] overflow-y-auto duration-200 flex flex-col gap-1 p-2 w-80 bg-settingsPanel border border-chatbox rounded-lg drop-shadow-md ${
+      className={`absolute bottom-[3.75rem] min-h-[13rem] max-h-[30rem] overflow-y-auto duration-200 flex flex-col gap-1 p-2 w-80 bg-base-100 border border-chatbox rounded-lg drop-shadow-md ${
         open
           ? "block right-[0.75rem] lg:right-[0.5rem]"
           : "hidden opacity-0 right-[0.75rem]"
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 671af4c..afb75ac 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -12,7 +12,7 @@ export function Settings() {
 
   return (
     <div
-      className={`absolute bottom-[3.75rem] duration-200 flex flex-col gap-4 p-3 w-80 bg-base-300 border border-base-100 rounded-lg drop-shadow-md ${
+      className={`absolute bottom-[3.75rem] duration-200 flex flex-col gap-4 p-3 w-80 bg-base-100 border border-base-100 rounded-lg drop-shadow-md ${
         open
           ? "block right-[0.75rem] lg:right-[0.5rem]"
           : "hidden opacity-0 right-[0.75rem]"
@@ -189,7 +189,7 @@ export function Settings() {
             <Check
               strokeWidth={4}
               size={20}
-              className="absolute p-0.5 pointer-events-none inset-0 mx-auto my-auto text-settingsPanel"
+              className="absolute p-0.5 pointer-events-none inset-0 mx-auto my-auto"
             />
           )}
           <input
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..a99bec7
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,66 @@
+import { Dispatch, SetStateAction } from "react"
+
+export const QuickStartMenu = {
+  key: 0,
+  name: "Quick Start",
+  state: "active",
+  desc: "One Click to start",
+}
+export const ChatViewMenu = {
+  key: 1,
+  name: "Chat",
+  state: "",
+  desc: "Chat with the sd",
+}
+export const ConfigMenu = {
+  key: 2,
+  name: "Configuration",
+  state: "",
+  desc: "A lot of configurations",
+}
+export const ModelsMenu = {
+  key: 3,
+  name: "Models",
+  state: "",
+  desc: "Model files",
+}
+export const PromptsMenu = {
+  key: 4,
+  name: "Prompts",
+  state: "",
+  desc: "Prompt collections",
+}
+interface SidebarProps {
+  setMenu: Dispatch<SetStateAction<number>>
+}
+export const Sidebar: React.FC<SidebarProps> = ({ setMenu }) => {
+  const MenusData = [QuickStartMenu, ChatViewMenu, ConfigMenu, ModelsMenu, PromptsMenu]
+  MenusData.forEach((menu, index) => {
+    menu.key = index
+  })
+
+  return (
+    <ul className="menu w-48 p-4 bg-base-200 text-base-content">
+      {MenusData.map((item) => (
+        <li
+          key={item.key}
+          onClick={() => {
+            MenusData.forEach((m) => (m.state = ""))
+            MenusData[item.key].state = "active"
+            setMenu(item.key)
+          }}
+        >
+          <a className={item.state}>{item.name}</a>
+        </li>
+      ))}
+      <select className="select m-4" data-choose-theme>
+        <option value="">Default</option>
+        <option value="cyberpunk">cyberpunk</option>
+        <option value="cupcake">cupcake</option>
+        <option value="dark">dark</option>
+        <option value="bumblebee">bumblebee</option>
+        <option value="corporate">corporate</option>
+      </select>
+    </ul>
+  )
+}
diff --git a/src/containers/StartView.tsx b/src/containers/StartView.tsx
index a7a4b67..3134148 100644
--- a/src/containers/StartView.tsx
+++ b/src/containers/StartView.tsx
@@ -5,26 +5,18 @@ import { open } from "@/lib/dialog"
 import { StoreType } from "@/lib/store"
 interface StartViewProps {
   store: StoreType
-  running: boolean
   output: string
   downloading: boolean
   downloadingFile: string
   downloadProgress: number
-  onSelectDirClick: () => void
-  onStartClick: () => void
-  onInitClick: () => void
 }
 
 export const StartView: React.FC<StartViewProps> = ({
   store,
-  running,
   output,
   downloading,
   downloadingFile,
   downloadProgress,
-  onSelectDirClick,
-  onInitClick,
-  onStartClick,
 }: StartViewProps) => {
   const goToPythonDownload = () => {
     void openLink("https://www.python.org/downloads/")
@@ -120,47 +112,8 @@ export const StartView: React.FC<StartViewProps> = ({
           )}
         </div>
       </div>
-      <div className="container m-4 flex justify-center">
-        <div className="btn-group">
-          <button onClick={onSelectDirClick} className="btn btn-lg btn-outline">
-            {store.settings.work_folder || "Start by selecting a folder"}
-          </button>
-          {running ? (
-            <>
-              <button className="btn btn-lg btn-primary loading" disabled>
-                Running
-              </button>
-              <button className="btn btn-lg">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </>
-          ) : (
-            <>
-              <button onClick={onInitClick} className="btn btn-lg btn-secondary">
-                Init
-              </button>
-              <button onClick={onStartClick} className="btn btn-lg btn-primary">
-                Start
-              </button>
-            </>
-          )}
-        </div>
-      </div>
 
-      <div className="card w-full bg-base-100 shadow-xl">
+      <div className="card w-full bg-base-100 shadow-xl mt-2">
         <div className="card-body">
           <h2 className="card-title">Output:</h2>
           {downloading && (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 124a019..0ebd31a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,54 +7,28 @@ import Head from "next/head"
 import { useEffect, useState } from "react"
 import { themeChange } from "theme-change"
 
+import {
+  ChatViewMenu,
+  ConfigMenu,
+  ModelsMenu,
+  PromptsMenu,
+  QuickStartMenu,
+  Sidebar,
+} from "@/components/Sidebar"
 import ChatView from "@/containers/ChatView"
 import { ConfigView } from "@/containers/ConfigView"
 import { StartView } from "@/containers/StartView"
 import { useGlobalShortcut } from "@/hooks/tauri/shortcuts"
-import { listen, openWebview, resolveResource } from "@/lib/api"
+import { listen, openWebview } from "@/lib/api"
 import { open } from "@/lib/dialog"
 import useStore from "@/lib/store"
 
 const regex = /(https?:\/\/[^ ]*)/
-const QuickStartMenu = {
-  key: 0,
-  name: "Quick Start",
-  state: "active",
-  desc: "One Click to start",
-}
-const ChatViewMenu = {
-  key: 1,
-  name: "Chat",
-  state: "",
-  desc: "Chat with the sd",
-}
-const ConfigMenu = {
-  key: 2,
-  name: "Configuration",
-  state: "",
-  desc: "A lot of configurations",
-}
-const ModelsMenu = {
-  key: 3,
-  name: "Models",
-  state: "",
-  desc: "Model files",
-}
-const PromptsMenu = {
-  key: 4,
-  name: "Prompts",
-  state: "",
-  desc: "Prompt collections",
-}
 
 const Home: NextPage = () => {
-  const MenusData = [QuickStartMenu, ChatViewMenu, ConfigMenu, ModelsMenu, PromptsMenu]
-  MenusData.forEach((menu, index) => {
-    menu.key = index
-  })
   const store = useStore()
 
-  const [menu, setMenu] = useState(QuickStartMenu.key)
+  const [menu, setMenu] = useState(0)
 
   const [running, setRunning] = useState<boolean>(false)
   const [shellOutput, setShellOutput] = useState<string>("")
@@ -177,62 +151,99 @@ const Home: NextPage = () => {
   })
 
   return (
-    <div className="flex min-h-screen flex-row bg-base-100">
+    <div className="min-h-screen drawer drawer-mobile">
       <Head>
         <title>SD Desk</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <ul className="menu w-48 bg-base-200 p-4">
-        {MenusData.map((item) => (
-          <li
-            key={item.key}
-            onClick={() => {
-              MenusData.forEach((m) => (m.state = ""))
-              MenusData[item.key].state = "active"
-              setMenu(item.key)
-            }}
-          >
-            <a className={item.state}>{item.name}</a>
-          </li>
-        ))}
-        <select className="select m-4" data-choose-theme>
-          <option value="">Default</option>
-          <option value="cyberpunk">cyberpunk</option>
-          <option value="cupcake">cupcake</option>
-          <option value="dark">dark</option>
-          <option value="bumblebee">bumblebee</option>
-          <option value="corporate">corporate</option>
-        </select>
-      </ul>
-
-      <main className="flex flex-1 flex-col p-4">
-        {menu === ConfigMenu.key && <ConfigView store={store} />}
-        {menu === QuickStartMenu.key && (
-          <StartView
-            running={running}
-            store={store}
-            output={shellOutput}
-            onSelectDirClick={onSelectDirClick}
-            onInitClick={onInitWebuiClick}
-            onStartClick={onStartWebuiClick}
-            downloading={downloading}
-            downloadingFile={downloadingFile}
-            downloadProgress={downloadProgress}
-          ></StartView>
-        )}
-        {menu === ChatViewMenu.key && <ChatView />}
-        {menu === ModelsMenu.key && (
-          <button onClick={onSelectDirClick} className="btn btn-lg">
-            {store.settings.work_folder}
-          </button>
-        )}
-        {menu === PromptsMenu.key && (
-          <button onClick={onSelectDirClick} className="btn btn-lg">
-            {store.settings.work_folder}
-          </button>
-        )}
-      </main>
+      <input id="my-drawer" type="checkbox" className="drawer-toggle" />
+      <div className="drawer-content flex flex-col items-center justify-center">
+        <div className="w-full navbar bg-base-100">
+          <div className="flex-none lg:hidden">
+            <label htmlFor="my-drawer" className="btn btn-square btn-ghost">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="inline-block w-6 h-6 stroke-current"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                ></path>
+              </svg>
+            </label>
+          </div>
+          <div className="flex-1 px-2 mx-2 btn-group">
+            <button onClick={onSelectDirClick} className="btn btn-lg btn-outline">
+              {store.settings.work_folder || "Start by selecting a folder"}
+            </button>
+            {running ? (
+              <>
+                <button className="btn btn-lg btn-primary loading" disabled>
+                  Running
+                </button>
+                <button className="btn btn-lg">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </>
+            ) : (
+              <>
+                <button onClick={onInitWebuiClick} className="btn btn-lg btn-secondary">
+                  Init
+                </button>
+                <button onClick={onStartWebuiClick} className="btn btn-lg btn-primary">
+                  Start
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+        <main className="flex flex-1 flex-col p-4 w-full">
+          {menu === ConfigMenu.key && <ConfigView store={store} />}
+          {menu === QuickStartMenu.key && (
+            <StartView
+              store={store}
+              output={shellOutput}
+              downloading={downloading}
+              downloadingFile={downloadingFile}
+              downloadProgress={downloadProgress}
+            ></StartView>
+          )}
+          {menu === ChatViewMenu.key && <ChatView />}
+          {menu === ModelsMenu.key && (
+            <button onClick={onSelectDirClick} className="btn btn-lg">
+              {store.settings.work_folder}
+            </button>
+          )}
+          {menu === PromptsMenu.key && (
+            <button onClick={onSelectDirClick} className="btn btn-lg">
+              {store.settings.work_folder}
+            </button>
+          )}
+        </main>
+      </div>
+      <div className="drawer-side">
+        <label htmlFor="my-drawer" className="drawer-overlay"></label>
+        <Sidebar setMenu={setMenu}></Sidebar>
+      </div>
+
       {errorInfo && (
         <div className="toast toast-top toast-end">
           <div className="alert alert-info">