refactor(flat-pages): open users panel on click users count

packages/flat-components/src/components/ChatPanel/index.tsx

@@ -6,7 +6,10 @@ import { useTranslate } from "@netless/flat-i18n";
 import { ChatMessages, ChatMessagesProps } from "./ChatMessages";
 import { ChatTabTitle, ChatTabTitleProps } from "./ChatTabTitle";
 
-export type ChatPanelProps = { totalUserCount?: number } & ChatTabTitleProps &
+export type ChatPanelProps = {
+    totalUserCount?: number;
+    onClickTotalUsersCount?: () => void;
+} & ChatTabTitleProps &
     Omit<ChatMessagesProps, "visible">;
 
 export const ChatPanel = /* @__PURE__ */ observer<ChatPanelProps>(function ChatPanel(props) {
@@ -19,7 +22,7 @@ export const ChatPanel = /* @__PURE__ */ observer<ChatPanelProps>(function ChatP
                     <span>{t("messages")}</span>
                 </ChatTabTitle>
                 {props.totalUserCount && (
-                    <span className="chat-tab-subtitle">
+                    <span className="chat-tab-subtitle" onClick={props.onClickTotalUsersCount}>
                         {t("total-users-count", { count: props.totalUserCount })}
                     </span>
                 )}

packages/flat-pages/src/components/ChatPanel/index.tsx

@@ -23,6 +23,7 @@ export const ChatPanel = observer<ChatPanelProps>(function ChatPanel({ classRoom
             unreadCount={classRoomStore.users.handRaisingJoiners.length || null}
             userUUID={classRoomStore.userUUID}
             onBanChange={classRoomStore.onToggleBan}
+            onClickTotalUsersCount={() => classRoomStore.toggleUsersPanel(true)}
             onMessageSend={classRoomStore.onMessageSend}
         />
     );

packages/flat-pages/src/components/UsersButton.tsx

@@ -1,7 +1,7 @@
 import "./UsersButton.less";
 
 // TODO: remove this component when multi sub window is done
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import { Modal } from "antd";
 import { observer } from "mobx-react-lite";
 import { useTranslate } from "@netless/flat-i18n";
@@ -14,7 +14,6 @@ interface UsersButtonProps {
 
 export const UsersButton = observer<UsersButtonProps>(function UsersButton({ classroom }) {
     const t = useTranslate();
-    const [open, setOpen] = useState(false);
 
     // not including teacher
     const users = useComputed(() => {
@@ -87,16 +86,16 @@ export const UsersButton = observer<UsersButtonProps>(function UsersButton({ cla
             <TopBarRightBtn
                 icon={<SVGUserGroup />}
                 title={t("users")}
-                onClick={() => setOpen(!open)}
+                onClick={() => classroom.toggleUsersPanel(!classroom.isUsersPanelVisible)}
             />
             <Modal
                 centered
                 destroyOnClose
                 className="users-button-modal"
                 footer={[]}
-                open={open}
+                open={classroom.isUsersPanelVisible}
                 title={t("users")}
-                onCancel={() => setOpen(false)}
+                onCancel={() => classroom.toggleUsersPanel(false)}
             >
                 <UsersPanel
                     getDeviceState={getDeviceState}

packages/flat-stores/src/classroom-store/index.ts

@@ -74,6 +74,7 @@ export class ClassroomStore {
 
     public isCloudStoragePanelVisible = false;
     public isHandRaisingPanelVisible = false;
+    public isUsersPanelVisible = false;
 
     public roomStatusLoading = RoomStatusLoadingType.Null;
 
@@ -665,6 +666,10 @@ export class ClassroomStore {
         this.isCloudStoragePanelVisible = visible;
     };
 
+    public toggleUsersPanel = (visible = !this.isUsersPanelVisible): void => {
+        this.isUsersPanelVisible = visible;
+    };
+
     public onDrop = (file: File): void => {
         this.toggleCloudStoragePanel(true);
         const cloudStorage = this.whiteboardStore.cloudStorageStore;