togglable member list

src/components/messaging/Chat.tsx

@@ -63,14 +63,16 @@ function ChatContent({ channel, guild }: Props2) {
 	);
 }
 
-function Content(props: Props2) {
+const Content = observer((props: Props2) => {
+	const { memberListVisible } = useAppStore();
+
 	return (
 		<WrapperOne>
 			<ChatContent {...props} />
-			<MemberList />
+			{memberListVisible && <MemberList />}
 		</WrapperOne>
 	);
-}
+});
 
 /**
  * Main component for rendering channel messages

src/components/messaging/ChatHeader.tsx

@@ -1,6 +1,8 @@
 import * as Icons from "@mdi/js";
+import { observer } from "mobx-react-lite";
 import styled from "styled-components";
 import useLogger from "../../hooks/useLogger";
+import { useAppStore } from "../../stores/AppStore";
 import Channel from "../../stores/objects/Channel";
 import Icon from "../Icon";
 import { SectionHeader } from "../SectionHeader";
@@ -111,19 +113,16 @@ interface ActionItemProps {
 	active?: boolean;
 	ariaLabel?: string;
 	tooltip: string;
+	onClick?: () => void;
 }
 
-function ActionItem({ icon, active, ariaLabel, tooltip }: ActionItemProps) {
+function ActionItem({ icon, active, ariaLabel, tooltip, onClick }: ActionItemProps) {
 	const logger = useLogger("ChatHeader.tsx:ActionItem");
 
 	return (
 		<Tooltip title={tooltip}>
 			<IconWrapper>
-				<IconButton
-					onClick={() => {
-						logger.debug("click");
-					}}
-				>
+				<IconButton onClick={onClick}>
 					<CustomIcon $active={active} icon={icon} size="24px" aria-label={ariaLabel} />
 				</IconButton>
 			</IconWrapper>
@@ -135,6 +134,8 @@ function ActionItem({ icon, active, ariaLabel, tooltip }: ActionItemProps) {
  * Top header for channel messages section
  */
 function ChatHeader({ channel }: Props) {
+	const { memberListVisible, toggleMemberList } = useAppStore();
+
 	return (
 		<Container>
 			<Wrapper>
@@ -152,7 +153,8 @@ function ChatHeader({ channel }: Props) {
 						icon="mdiAccountMultiple"
 						tooltip="Toggle Member List"
 						ariaLabel="Toggle Member List"
-						active
+						active={memberListVisible}
+						onClick={toggleMemberList}
 					/>
 					<ActionItem icon="mdiPin" tooltip="Pinned Messages" ariaLabel="Pinned Messages" />
 					<ActionItem icon="mdiBellBadge" tooltip="Notification Settings" ariaLabel="Notification Settings" />
@@ -162,4 +164,4 @@ function ChatHeader({ channel }: Props) {
 	);
 }
 
-export default ChatHeader;
+export default observer(ChatHeader);

src/stores/AppStore.ts

@@ -50,10 +50,14 @@ export default class AppStore {
 	@observable activeGuildId: Snowflake | undefined | "@me" = "@me";
 	@observable activeChannel: Channel | null = null;
 	@observable activeChannelId: string | undefined = undefined;
+	@observable memberListVisible: boolean = true;
 
 	constructor() {
 		makeAutoObservable(this);
 
+		// bind this in toggleMemberList
+		this.toggleMemberList = this.toggleMemberList.bind(this);
+
 		window.addEventListener("online", () => this.setNetworkConnected(true));
 		window.addEventListener("offline", () => this.setNetworkConnected(false));
 	}
@@ -138,6 +142,11 @@ export default class AppStore {
 	setFpsShown(value: boolean) {
 		this.fpsShown = value;
 	}
+
+	@action
+	toggleMemberList() {
+		this.memberListVisible = !this.memberListVisible;
+	}
 }
 
 export const appStore = new AppStore();