sidebar collapsed properly

app/components/home.module.scss

@@ -38,6 +38,17 @@
   }
 }
 
+.sidebar-collapse {
+  top: 0;
+  width: var(--sidebar-collapse-width);
+  box-sizing: border-box;
+  padding: 20px;
+  background-color: var(--second);
+  display: flex;
+  flex-direction: column;
+  box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
+}
+
 .sidebar {
   top: 0;
   width: var(--sidebar-width);
@@ -93,6 +104,9 @@
   padding-top: 20px;
   padding-bottom: 20px;
 }
+.sidebar-header-collapse {
+  display: none;
+}
 
 .sidebar-logo {
   position: absolute;
@@ -100,6 +114,22 @@
   bottom: 18px;
 }
 
+.sidebar-logo-collapse {
+  //position: absolute;
+  //width: 30px;
+  display: none;
+}
+
+.gpt-logo-collapse {
+  margin-left: 2px;
+  margin-bottom: 25px;
+  margin-top: 10px;
+}
+.gpt-logo-collapse svg {
+  transform: scale(1.3);
+  opacity: 0.5;
+}
+
 .sidebar-title {
   font-size: 20px;
   font-weight: bold;
@@ -114,10 +144,24 @@
   flex: 1;
   overflow: auto;
 }
+.chat-list-collapse {
+}
 
 .chat-list {
 }
-
+.chat-item-collapse {
+  padding: 4px 11px;
+  background-color: var(--white);
+  border-radius: 10px;
+  margin-bottom: 10px;
+  box-shadow: var(--card-shadow);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  user-select: none;
+  border: 2px solid transparent;
+  position: relative;
+  overflow: hidden;
+}
 .chat-item {
   padding: 10px 14px;
   background-color: var(--white);
@@ -143,6 +187,9 @@
     transform: translateY(0px);
   }
 }
+.chat-item-collapse:hover {
+  background-color: var(--hover-color);
+}
 
 .chat-item:hover {
   background-color: var(--hover-color);
@@ -162,6 +209,10 @@
   white-space: nowrap;
 }
 
+.chat-item-title-collapse {
+  display: hide;
+}
+
 .chat-item-delete {
   position: absolute;
   top: 10px;
@@ -170,15 +221,29 @@
   opacity: 0;
 }
 
+.chat-item-delete-collapse {
+  position: absolute;
+  top: -4px;
+  right: -20px;
+  transition: all ease 0.3s;
+  opacity: 0;
+}
+
 .chat-item:hover > .chat-item-delete {
   opacity: 0.5;
   right: 10px;
 }
 
+.chat-item-collapse:hover > .chat-item-delete-collapse {
+  opacity: 0.5;
+  right: 0px;
+}
 .chat-item:hover > .chat-item-delete:hover {
   opacity: 1;
 }
-
+.chat-item-collapse:hover > .chat-item-delete-collapse:hover {
+  opacity: 1;
+}
 .chat-item-info {
   display: flex;
   justify-content: space-between;
@@ -187,6 +252,10 @@
   margin-top: 8px;
 }
 
+.chat-item-info-collapse {
+  color: rgb(166, 166, 166);
+}
+
 .chat-item-count {
 }
 
@@ -198,15 +267,28 @@
   justify-content: space-between;
   padding-top: 20px;
 }
+.sidebar-tail-collapse {
+  display: flex;
+  justify-content: space-between;
+  //padding-top: 20px;
+  flex-direction: column-reverse;
+}
 
 .sidebar-actions {
   display: inline-flex;
 }
 
+.sidebar-actions-collapse {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.sidebar-action-collapse {
+  margin-top: 15px;
+}
 .sidebar-action:not(:last-child) {
   margin-right: 15px;
 }
-
 .chat {
   display: flex;
   flex-direction: column;

app/components/home.tsx

@@ -17,12 +17,14 @@ import AddIcon from "../icons/add.svg";
 import DeleteIcon from "../icons/delete.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 import MenuIcon from "../icons/menu.svg";
-import CloseIcon from "../icons/close.svg";
+//import CloseIcon from "../icons/close.svg";
 import CopyIcon from "../icons/copy.svg";
 import DownloadIcon from "../icons/download.svg";
+import LeftIcon from "../icons/left.svg";
+import RightIcon from "../icons/right.svg";
 
 import { Message, SubmitKey, useChatStore, ChatSession } from "../store";
-import { showModal, showToast } from "./ui-lib";
+import { showModal } from "./ui-lib";
 import { copyToClipboard, downloadAs, isIOS, selectOrCopy } from "../utils";
 import Locale from "../locales";
 
@@ -74,14 +76,36 @@ export function ChatItem(props: {
   time: string;
   selected: boolean;
 }) {
-  return (
+  const [sidebarCollapse] = useChatStore((state) => [state.sidebarCollapse]);
+  return sidebarCollapse ? (
+    <div
+      className={`${styles["chat-item-collapse"]} ${
+        props.selected && styles["chat-item-selected"]
+      }`}
+      onClick={props.onClick}
+    >
+      <div className={styles["chat-item-info-collapse"]}>
+        {Locale.ChatItem.ChatItemCount(props.count).replace(/[^0-9]/g, "")}
+      </div>
+      <div
+        className={
+          sidebarCollapse
+            ? styles["chat-item-delete-collapse"]
+            : styles["chat-item-delete"]
+        }
+        onClick={props.onDelete}
+      >
+        <DeleteIcon />
+      </div>
+    </div>
+  ) : (
     <div
       className={`${styles["chat-item"]} ${
         props.selected && styles["chat-item-selected"]
       }`}
       onClick={props.onClick}
     >
-      <div className={styles["chat-item-title"]}>{props.title}</div>
+      <div>{props.title}</div>
       <div className={styles["chat-item-info"]}>
         <div className={styles["chat-item-count"]}>
           {Locale.ChatItem.ChatItemCount(props.count)}
@@ -96,29 +120,40 @@ export function ChatItem(props: {
 }
 
 export function ChatList() {
-  const [sessions, selectedIndex, selectSession, removeSession] = useChatStore(
+  const [
-    (state) => [
+    sidebarCollapse,
-      state.sessions,
+    sessions,
-      state.currentSessionIndex,
+    selectedIndex,
-      state.selectSession,
+    selectSession,
-      state.removeSession,
+    removeSession,
-    ],
+  ] = useChatStore((state) => [
-  );
+    state.sidebarCollapse,
+    state.sessions,
+    state.currentSessionIndex,
+    state.selectSession,
+    state.removeSession,
+  ]);
 
   return (
-    <div className={styles["chat-list"]}>
+    <>
-      {sessions.map((item, i) => (
+      <div className={styles["gpt-logo-collapse"]}>
-        <ChatItem
+        {sidebarCollapse ? <BotIcon /> : null}
-          title={item.topic}
+      </div>
-          time={item.lastUpdate}
+
-          count={item.messages.length}
+      <div className={styles["chat-list-collapse"]}>
-          key={i}
+        {sessions.map((item, i) => (
-          selected={i === selectedIndex}
+          <ChatItem
-          onClick={() => selectSession(i)}
+            title={item.topic}
-          onDelete={() => removeSession(i)}
+            time={item.lastUpdate}
-        />
+            count={item.messages.length}
-      ))}
+            key={i}
-    </div>
+            selected={i === selectedIndex}
+            onClick={() => selectSession(i)}
+            onDelete={() => removeSession(i)}
+          />
+        ))}
+      </div>
+    </>
   );
 }
 
@@ -172,7 +207,7 @@ export function PromptHints(props: {
 
 export function Chat(props: {
   showSideBar?: () => void;
-  sideBarShowing?: boolean;
+  sidebarShowing?: boolean;
 }) {
   type RenderMessage = Message & { preview?: boolean };
 
@@ -475,7 +510,7 @@ export function Chat(props: {
               setAutoScroll(false);
               setTimeout(() => setPromptHints([]), 100);
             }}
-            autoFocus={!props?.sideBarShowing}
+            autoFocus={!props?.sidebarShowing}
           />
           <IconButton
             icon={<SendWhiteIcon />}
@@ -588,6 +623,10 @@ export function Home() {
   );
   const loading = !useHasHydrated();
   const [showSideBar, setShowSideBar] = useState(true);
+  const [sidebarCollapse, setSideBarCollapse] = useChatStore((state) => [
+    state.sidebarCollapse,
+    state.setSidebarCollapse,
+  ]);
 
   // setting
   const [openSettings, setOpenSettings] = useState(false);
@@ -606,16 +645,36 @@ export function Home() {
       }`}
     >
       <div
-        className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
+        className={
+          sidebarCollapse
+            ? ` ${styles["sidebar-collapse"]}`
+            : styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`
+        }
       >
-        <div className={styles["sidebar-header"]}>
+        <div
-          <div className={styles["sidebar-title"]}>ChatGPT Next</div>
+          className={
-          <div className={styles["sidebar-sub-title"]}>
+            sidebarCollapse
-            Build your own AI assistant.
+              ? styles["sidebar-header-collapse"]
-          </div>
+              : styles["sidebar-header"]
-          <div className={styles["sidebar-logo"]}>
+          }
-            <ChatGptIcon />
+        >
-          </div>
+          {sidebarCollapse ? null : (
+            <>
+              <div className={styles["sidebar-title"]}>ChatGPT Next</div>
+              <div className={styles["sidebar-sub-title"]}>
+                Build your own AI assistant.
+              </div>
+            </>
+          )}
+          {sidebarCollapse ? (
+            <div className={styles["sidebar-logo-collapse"]}>
+              <ChatGptIcon />
+            </div>
+          ) : (
+            <div className={styles["sidebar-logo"]}>
+              <ChatGptIcon />
+            </div>
+          )}
         </div>
 
         <div
@@ -628,8 +687,21 @@ export function Home() {
           <ChatList />
         </div>
 
-        <div className={styles["sidebar-tail"]}>
+        <div
-          <div className={styles["sidebar-actions"]}>
+          className={
+            sidebarCollapse
+              ? styles["sidebar-tail-collapse"]
+              : styles["sidebar-tail"]
+          }
+        >
+          <div
+            className={
+              sidebarCollapse
+                ? styles["sidebar-actions-collapse"]
+                : styles["sidebar-actions"]
+            }
+          >
+            {/*
             <div className={styles["sidebar-action"] + " " + styles.mobile}>
               <IconButton
                 icon={<CloseIcon />}
@@ -639,8 +711,37 @@ export function Home() {
                   }
                 }}
               />
+							</div>*/}
+            <div
+              className={
+                sidebarCollapse
+                  ? styles["sidebar-action-collapse"]
+                  : styles["sidebar-action"]
+              }
+            >
+              {sidebarCollapse ? (
+                <IconButton
+                  icon={<RightIcon />}
+                  onClick={() => {
+                    setSideBarCollapse(false);
+                  }}
+                />
+              ) : (
+                <IconButton
+                  icon={<LeftIcon />}
+                  onClick={() => {
+                    setSideBarCollapse(true);
+                  }}
+                />
+              )}
             </div>
-            <div className={styles["sidebar-action"]}>
+            <div
+              className={
+                sidebarCollapse
+                  ? styles["sidebar-action-collapse"]
+                  : styles["sidebar-action"]
+              }
+            >
               <IconButton
                 icon={<SettingsIcon />}
                 onClick={() => {
@@ -649,16 +750,26 @@ export function Home() {
                 }}
               />
             </div>
-            <div className={styles["sidebar-action"]}>
+            <div
+              className={
+                sidebarCollapse
+                  ? styles["sidebar-action-collapse"]
+                  : styles["sidebar-action"]
+              }
+            >
               <a href={REPO_URL} target="_blank">
                 <IconButton icon={<GithubIcon />} />
               </a>
             </div>
           </div>
-          <div>
+          <div
+            className={
+              sidebarCollapse ? styles["sidebar-action-collapse"] : undefined
+            }
+          >
             <IconButton
               icon={<AddIcon />}
-              text={Locale.Home.NewChat}
+              text={sidebarCollapse ? undefined : Locale.Home.NewChat}
               onClick={() => {
                 createNewSession();
                 setShowSideBar(false);
@@ -680,7 +791,7 @@ export function Home() {
           <Chat
             key="chat"
             showSideBar={() => setShowSideBar(true)}
-            sideBarShowing={showSideBar}
+            sidebarShowing={showSideBar}
           />
         )}
       </div>

app/icons/left.svg

@@ -0,0 +1,14 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+	<title>left</title>
+	<defs>
+		<image  width="256" height="256" id="img1" href="data:image/png;base64,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"/>
+	</defs>
+	<style>
+		.s0 { fill: none;stroke: #000000 } 
+	</style>
+	<use id="Layer 1" href="#img1" x="0" y="0"/>
+	<g id="Folder 1">
+		<path id="Shape 1" class="s0" d="m8 3l-5 5.1 5 5.1"/>
+		<path id="Shape 1 copy" class="s0" d="m12 3l-5 5.1 5 5.1"/>
+	</g>
+</svg>

app/icons/right.svg

@@ -0,0 +1,14 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+	<title>left</title>
+	<defs>
+		<image  width="256" height="256" id="img1" href="data:image/png;base64,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"/>
+	</defs>
+	<style>
+		.s0 { fill: none;stroke: #000000 } 
+	</style>
+	<use id="Layer 1" href="#img1" x="0" y="0"/>
+	<g id="RIght">
+		<path id="Shape 1" class="s0" d="m7 3l5 5.1-5 5.1"/>
+		<path id="Shape 1 copy" class="s0" d="m3 3l5 5.1-5 5.1"/>
+	</g>
+</svg>

app/store/app.ts

@@ -204,6 +204,8 @@ interface ChatStore {
   resetConfig: () => void;
   updateConfig: (updater: (config: ChatConfig) => void) => void;
   clearAllData: () => void;
+  sidebarCollapse: boolean;
+  setSidebarCollapse: (value: boolean) => void;
 }
 
 function countMessages(msgs: Message[]) {
@@ -480,6 +482,12 @@ export const useChatStore = create<ChatStore>()(
           location.reload();
         }
       },
+      sidebarCollapse: false,
+      setSidebarCollapse(value) {
+        set({
+          sidebarCollapse: value,
+        });
+      },
     }),
     {
       name: LOCAL_KEY,

app/styles/globals.scss

@@ -51,6 +51,7 @@
   --window-width: 90vw;
   --window-height: 90vh;
   --sidebar-width: 300px;
+  --sidebar-collapse-width: 8vh;
   --window-content-width: calc(100% - var(--sidebar-width));
   --message-max-width: 80%;
 }
@@ -87,7 +88,7 @@ body {
   align-items: center;
   user-select: none;
   font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
-  "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 
   @media only screen and (max-width: 600px) {
     background-color: var(--second);