feat: support hiding the left chat menu (casibase#1293)

Author: dark-Qy

web/src/ChatPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Button, Drawer, Modal, Spin} from "antd";
-import {BarsOutlined, CloseCircleFilled} from "@ant-design/icons";
+import {BarsOutlined, CloseCircleFilled, MenuFoldOutlined, MenuUnfoldOutlined} from "@ant-design/icons";
 import moment from "moment";
 import * as StoreBackend from "./backend/StoreBackend";
 import ChatMenu from "./ChatMenu";
@@ -39,6 +39,9 @@ class ChatPage extends BaseListPage {
   }
 
   UNSAFE_componentWillMount() {
+    const savedCollapsedState = localStorage.getItem("chatMenuCollapsed");
+    const chatMenuCollapsed = savedCollapsedState ? JSON.parse(savedCollapsedState) : false;
+
     this.setState({
       loading: true,
       disableInput: false,
@@ -47,6 +50,7 @@ class ChatPage extends BaseListPage {
       messageError: false,
       autoRead: false,
       chatMenuVisible: false,
+      chatMenuCollapsed: chatMenuCollapsed,
       defaultStore: null,
       filteredStores: [],
       paneCount: 1,
@@ -85,6 +89,14 @@ class ChatPage extends BaseListPage {
     });
   };
 
+  toggleChatMenuCollapse = () => {
+    const newCollapsedState = !this.state.chatMenuCollapsed;
+    this.setState({
+      chatMenuCollapsed: newCollapsedState,
+    });
+    localStorage.setItem("chatMenuCollapsed", JSON.stringify(newCollapsedState));
+  };
+
   getGlobalStores() {
     StoreBackend.getGlobalStores("", "", "", "", "", "").then((res) => {
       if (res.status === "ok") {
@@ -642,7 +654,7 @@ class ChatPage extends BaseListPage {
           this.renderUnsafePasswordModal()
         }
         {
-          !(Setting.isMobile() || Setting.getUrlParam("isRaw") !== null) && (
+          !(Setting.isMobile() || Setting.getUrlParam("isRaw") !== null) && !this.state.chatMenuCollapsed && (
             <div style={{width: "250px", height: "100%", backgroundColor: "white", marginRight: "2px"}}>
               <ChatMenu ref={this.menu} chats={chats} chatName={this.getChat()} onSelectChat={onSelectChat} onAddChat={onAddChat} onDeleteChat={onDeleteChat} onUpdateChatName={onUpdateChatName} stores={this.state.stores} />
             </div>
@@ -658,10 +670,13 @@ class ChatPage extends BaseListPage {
 
         <div style={{flex: 1, height: "100%", backgroundColor: "white", position: "relative", display: "flex", flexDirection: "column"}}>
           {this.state.chat && this.state.paneCount === 1 && (
-            <div style={{display: "flex", alignItems: "center"}}>
+            <div style={{display: "flex", alignItems: "center", marginLeft: "15px"}}>
               {Setting.isMobile() && (
                 <Button type="text" icon={<BarsOutlined />} onClick={this.toggleChatMenu} style={{marginRight: "8px"}} />
               )}
+              {!(Setting.isMobile() || Setting.getUrlParam("isRaw") !== null) && (
+                <Button type="text" icon={this.state.chatMenuCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={this.toggleChatMenuCollapse} style={{marginRight: "8px"}} />
+              )}
               <div style={{flex: 1}}>
                 <StoreInfoTitle chat={this.state.chat} stores={this.state.stores} autoRead={this.state.autoRead} onUpdateAutoRead={(checked) => this.setState({autoRead: checked})} account={this.props.account} paneCount={this.state.paneCount} onPaneCountChange={(count) => this.setState({paneCount: count})} showPaneControls={true} />
               </div>

web/src/StoreInfoTitle.js

@@ -318,7 +318,7 @@ const StoreInfoTitle = (props) => {
 
         {showPaneControls && canManagePanes && (
           <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
-            <span style={{fontSize: "12px", color: "#666"}}>Panes: {paneCount}</span>
+            <span style={{fontSize: "12px", color: "#666", marginLeft: "20px", marginRight: "10px"}}>{i18next.t("chat:Panes")}: {paneCount}</span>
             <Button size="small" icon={<PlusOutlined />} onClick={addPane} />
             <Button size="small" icon={<MinusOutlined />} onClick={deletePane} disabled={paneCount <= 1} />
           </div>