feat: collapsible sidebar

app/components/chat-list.tsx

@@ -1,5 +1,6 @@
 import DeleteIcon from "../icons/delete.svg";
 import styles from "./home.module.scss";
+import BotIcon from "../icons/bot.svg";
 import {
   DragDropContext,
   Droppable,
@@ -22,7 +23,38 @@ export function ChatItem(props: {
   id: number;
   index: number;
 }) {
-  return (
+  const [sidebarCollapse] = useChatStore((state) => [state.sidebarCollapse]);
+  return sidebarCollapse ? (
+    <Draggable draggableId={`${props.id}`} index={props.index}>
+      {(provided) => (
+        <div
+          className={`${styles["chat-item-collapse"]} ${
+            props.selected && styles["chat-item-selected"]
+          }`}
+          onClick={props.onClick}
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+        >
+          <div className={styles["chat-item-info-collapse"]}>
+            {Locale.ChatItem.ChatItemCount(props.count).replace(/[^0-9]/g, "")
+              .length <= 3
+              ? Locale.ChatItem.ChatItemCount(props.count).replace(
+                  /[^0-9]/g,
+                  "",
+                )
+              : ":)"}
+          </div>
+          <div
+            className={styles["chat-item-delete-collapse"]}
+            onClick={props.onDelete}
+          >
+            <DeleteIcon />
+          </div>
+        </div>
+      )}
+    </Draggable>
+  ) : (
     <Draggable draggableId={`${props.id}`} index={props.index}>
       {(provided) => (
         <div
@@ -51,14 +83,21 @@ export function ChatItem(props: {
 }
 
 export function ChatList() {
-  const [sessions, selectedIndex, selectSession, removeSession, moveSession] =
-    useChatStore((state) => [
-      state.sessions,
-      state.currentSessionIndex,
-      state.selectSession,
-      state.removeSession,
-      state.moveSession,
-    ]);
+  const [
+    sidebarCollapse,
+    sessions,
+    selectedIndex,
+    selectSession,
+    removeSession,
+    moveSession,
+  ] = useChatStore((state) => [
+    state.sidebarCollapse,
+    state.sessions,
+    state.currentSessionIndex,
+    state.selectSession,
+    state.removeSession,
+    state.moveSession,
+  ]);
   const chatStore = useChatStore();
 
   const onDragEnd: OnDragEndResponder = (result) => {
@@ -78,31 +117,39 @@ export function ChatList() {
   };
 
   return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable droppableId="chat-list">
-        {(provided) => (
-          <div
-            className={styles["chat-list"]}
-            ref={provided.innerRef}
-            {...provided.droppableProps}
-          >
-            {sessions.map((item, i) => (
-              <ChatItem
-                title={item.topic}
-                time={item.lastUpdate}
-                count={item.messages.length}
-                key={item.id}
-                id={item.id}
-                index={i}
-                selected={i === selectedIndex}
-                onClick={() => selectSession(i)}
-                onDelete={() => chatStore.deleteSession(i)}
-              />
-            ))}
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
+    <>
+      {sidebarCollapse && (
+        <div className={styles["gpt-logo-collapse"]}>
+          <BotIcon />
+        </div>
+      )}
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId="chat-list">
+          {(provided: any) => (
+            <div
+              className={styles["chat-list"]}
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+            >
+              {sessions.map((item, i) => (
+                <ChatItem
+                  title={item.topic}
+                  time={item.lastUpdate}
+                  count={item.messages.length}
+                  key={item.id}
+                  id={item.id}
+                  index={i}
+                  selected={i === selectedIndex}
+                  onClick={() => selectSession(i)}
+                  onDelete={chatStore.deleteSession}
+                />
+              ))}
+
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </>
   );
 }

app/components/chat.tsx

@@ -400,17 +400,17 @@ export function ChatActions(props: {
   );
 }
 
-export function Chat(props: {
-  showSideBar?: () => void;
-  sideBarShowing?: boolean;
-}) {
+export function Chat() {
   type RenderMessage = Message & { preview?: boolean };
 
   const chatStore = useChatStore();
-  const [session, sessionIndex] = useChatStore((state) => [
-    state.currentSession(),
-    state.currentSessionIndex,
-  ]);
+  const [sidebarCollapse, setSideBarCollapse, session, sessionIndex] =
+    useChatStore((state) => [
+      state.sidebarCollapse,
+      state.setSidebarCollapse,
+      state.currentSession(),
+      state.currentSessionIndex,
+    ]);
   const fontSize = useChatStore((state) => state.config.fontSize);
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -599,7 +599,7 @@ export function Chat(props: {
 
   // Auto focus
   useEffect(() => {
-    if (props.sideBarShowing && isMobileScreen()) return;
+    if (isMobileScreen() && sidebarCollapse) return;
     inputRef.current?.focus();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -624,7 +624,9 @@ export function Chat(props: {
               icon={<ReturnIcon />}
               bordered
               title={Locale.Chat.Actions.ChatList}
-              onClick={props?.showSideBar}
+              onClick={() => {
+                setSideBarCollapse(!sidebarCollapse);
+              }}
             />
           </div>
           <div className={styles["window-action-button"]}>
@@ -775,7 +777,7 @@ export function Chat(props: {
               setAutoScroll(false);
               setTimeout(() => setPromptHints([]), 500);
             }}
-            autoFocus={!props?.sideBarShowing}
+            autoFocus={sidebarCollapse}
             rows={inputRows}
           />
           <IconButton

app/components/home.module.scss

@@ -39,7 +39,16 @@
     border: 0;
   }
 }
-
+.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);
@@ -72,6 +81,12 @@
   }
 }
 
+.window-content-collapse {
+  width: var(--window-content-width-collapse);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 .window-content {
   width: var(--window-content-width);
   height: 100%;
@@ -95,13 +110,22 @@
 
   .sidebar {
     position: absolute;
-    left: -100%;
+    //left: -100%;
     z-index: 1000;
     height: var(--full-height);
     transition: all ease 0.3s;
     box-shadow: none;
   }
+  .sidebar-collapse {
+    display: none;
+  }
 
+  .window-content-collapse {
+    width: var(--window-content-width);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
   .sidebar-show {
     left: 0;
   }
@@ -116,12 +140,29 @@
   padding-top: 20px;
   padding-bottom: 20px;
 }
-
+.sidebar-header-collapse {
+  display: none;
+}
 .sidebar-logo {
   position: absolute;
   right: 0;
   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.2;
+}
 
 .sidebar-title {
   font-size: 20px;
@@ -141,6 +182,27 @@
 .chat-list {
 }
 
+.chat-item-collapse {
+  //make content center
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  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);
@@ -155,6 +217,10 @@
   overflow: hidden;
 }
 
+.chat-item-collapse:hover {
+  background-color: var(--hover-color);
+}
+
 .chat-item:hover {
   background-color: var(--hover-color);
 }
@@ -173,6 +239,10 @@
   white-space: nowrap;
 }
 
+.chat-item-title-collapse {
+  display: hide;
+}
+
 .chat-item-delete {
   position: absolute;
   top: 10px;
@@ -181,16 +251,32 @@
   opacity: 0;
   cursor: pointer;
 }
+.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;
@@ -199,6 +285,10 @@
   margin-top: 8px;
 }
 
+.chat-item-info-collapse {
+  color: rgb(166, 166, 166);
+}
+
 .chat-item-count,
 .chat-item-date {
   overflow: hidden;
@@ -212,14 +302,45 @@
   padding-top: 20px;
 }
 
+.sidebar-tail-narrow {
+  display: flex;
+  flex-direction: column-reverse;
+  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-action:not(:last-child) {
+.sidebar-actions-collapse {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+//.sidebar-action:not(:last-child) {
+//  margin-right: 15px;
+//}
+
+.sidebar-action {
   margin-right: 15px;
 }
 
+.sidebar-action-collapse {
+  margin-top: 15px;
+}
+
+.sidebar-addIcon-collapse {
+  margin-top: 15px;
+}
+
 .chat {
   display: flex;
   flex-direction: column;

app/components/home.tsx

@@ -16,6 +16,9 @@ import AddIcon from "../icons/add.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";
 
+import LeftIcon from "../icons/left.svg";
+import RightIcon from "../icons/right.svg";
+
 import { useChatStore } from "../store";
 import { getCSSVar, isMobileScreen } from "../utils";
 import Locale from "../locales";
@@ -131,17 +134,21 @@ const useHasHydrated = () => {
 };
 
 function _Home() {
-  const [createNewSession, currentIndex, removeSession] = useChatStore(
-    (state) => [
-      state.newSession,
-      state.currentSessionIndex,
-      state.removeSession,
-    ],
-  );
+  const [
+    sidebarCollapse,
+    setSideBarCollapse,
+    createNewSession,
+    currentIndex,
+    removeSession,
+  ] = useChatStore((state) => [
+    state.sidebarCollapse,
+    state.setSidebarCollapse,
+    state.newSession,
+    state.currentSessionIndex,
+    state.removeSession,
+  ]);
   const chatStore = useChatStore();
   const loading = !useHasHydrated();
-  const [showSideBar, setShowSideBar] = useState(true);
-
   // setting
   const [openSettings, setOpenSettings] = useState(false);
   const config = useChatStore((state) => state.config);
@@ -164,85 +171,163 @@ function _Home() {
       }`}
     >
       <div
-        className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
+        className={
+          sidebarCollapse ? styles["sidebar-collapse"] : styles["sidebar"]
+        }
       >
-        <div className={styles["sidebar-header"]}>
-          <div className={styles["sidebar-title"]}>ChatGPT Next</div>
-          <div className={styles["sidebar-sub-title"]}>
-            Build your own AI assistant.
+        {!sidebarCollapse && (
+          <div className={styles["sidebar-header"]}>
+            <div className={styles["sidebar-title"]}>ChatGPT Next</div>
+            <div className={styles["sidebar-sub-title"]}>
+              Build your own AI assistant.
+            </div>
+            <div className={styles["sidebar-logo"]}>
+              <ChatGptIcon />
+            </div>
           </div>
-          <div className={styles["sidebar-logo"]}>
-            <ChatGptIcon />
-          </div>
-        </div>
+        )}
 
         <div
           className={styles["sidebar-body"]}
           onClick={() => {
             setOpenSettings(false);
-            setShowSideBar(false);
+            if (window.innerWidth < 768) {
+              setSideBarCollapse(true);
+            }
           }}
         >
           <ChatList />
         </div>
-
-        <div className={styles["sidebar-tail"]}>
-          <div className={styles["sidebar-actions"]}>
-            <div className={styles["sidebar-action"] + " " + styles.mobile}>
-              <IconButton
-                icon={<CloseIcon />}
-                onClick={chatStore.deleteSession}
-              />
+        {sidebarCollapse ? (
+          <div className={styles["sidebar-tail-collapse"]}>
+            <div className={styles["sidebar-actions-collapse"]}>
+              <div className={styles["sidebar-action-collapse"]}>
+                <IconButton
+                  icon={<RightIcon />}
+                  onClick={() => {
+                    setSideBarCollapse(false);
+                  }}
+                />
+              </div>
+              <div className={styles["sidebar-action-collapse"]}>
+                <IconButton
+                  icon={<CloseIcon />}
+                  onClick={chatStore.deleteSession}
+                />
+              </div>
+              <div className={styles["sidebar-action-collapse"]}>
+                <IconButton
+                  icon={<SettingsIcon />}
+                  onClick={() => {
+                    setOpenSettings(true);
+                    setSideBarCollapse(true);
+                  }}
+                  shadow
+                />
+              </div>
+              <div className={styles["sidebar-action-collapse"]}>
+                <a href={REPO_URL} target="_blank">
+                  <IconButton icon={<GithubIcon />} shadow />
+                </a>
+              </div>
             </div>
-            <div className={styles["sidebar-action"]}>
+            <div>
               <IconButton
-                icon={<SettingsIcon />}
+                className={styles["sidebar-addIcon-collapse"]}
+                icon={<AddIcon />}
+                text={""}
                 onClick={() => {
-                  setOpenSettings(true);
-                  setShowSideBar(false);
+                  createNewSession();
+                  setSideBarCollapse(true);
                 }}
                 shadow
               />
             </div>
-            <div className={styles["sidebar-action"]}>
-              <a href={REPO_URL} target="_blank">
-                <IconButton icon={<GithubIcon />} shadow />
-              </a>
+          </div>
+        ) : (
+          <div className={styles["sidebar-tail"]}>
+            <div className={styles["sidebar-actions"]}>
+              <div className={styles["sidebar-action"]}>
+                {sidebarCollapse ? (
+                  <IconButton
+                    icon={<RightIcon />}
+                    onClick={() => {
+                      setSideBarCollapse(false);
+                    }}
+                  />
+                ) : (
+                  <IconButton
+                    icon={<LeftIcon />}
+                    onClick={() => {
+                      setSideBarCollapse(true);
+                    }}
+                  />
+                )}
+              </div>
+              <div className={styles["sidebar-action"]}>
+                <IconButton
+                  icon={<CloseIcon />}
+                  onClick={chatStore.deleteSession}
+                />
+              </div>
+              <div className={styles["sidebar-action"]}>
+                <IconButton
+                  icon={<SettingsIcon />}
+                  onClick={() => {
+                    setOpenSettings(true);
+                    setSideBarCollapse(true);
+                  }}
+                  shadow
+                />
+              </div>
+              <div className={styles["sidebar-action"]}>
+                <a href={REPO_URL} target="_blank">
+                  <IconButton icon={<GithubIcon />} shadow />
+                </a>
+              </div>
+            </div>
+            <div>
+              <IconButton
+                icon={<AddIcon />}
+                // Auto hide Text 'Next Chat' when sidebar width shrinks
+                text={
+                  !isMobileScreen()
+                    ? chatStore.config.sidebarWidth <= 340
+                      ? ""
+                      : Locale.Home.NewChat
+                    : Locale.Home.NewChat
+                }
+                onClick={() => {
+                  createNewSession();
+                  setSideBarCollapse(true);
+                }}
+                shadow
+              />
             </div>
           </div>
-          <div>
-            <IconButton
-              icon={<AddIcon />}
-              text={Locale.Home.NewChat}
-              onClick={() => {
-                createNewSession();
-                setShowSideBar(false);
-              }}
-              shadow
-            />
-          </div>
-        </div>
+        )}
 
         <div
           className={styles["sidebar-drag"]}
           onMouseDown={(e) => onDragMouseDown(e as any)}
         ></div>
       </div>
-
-      <div className={styles["window-content"]}>
+      <div
+        className={
+          sidebarCollapse
+            ? styles["window-content-collapse"]
+            : styles["window-content"]
+        }
+      >
         {openSettings ? (
           <Settings
             closeSettings={() => {
               setOpenSettings(false);
-              setShowSideBar(true);
+              setSideBarCollapse(false);
             }}
           />
         ) : (
-          <Chat
-            key="chat"
-            showSideBar={() => setShowSideBar(true)}
-            sideBarShowing={showSideBar}
-          />
+          <Chat key="chat" />
         )}
       </div>
     </div>