From cc83b016102c46b22185daec72b9098dce3402d0 Mon Sep 17 00:00:00 2001
From: dominic <domw30@gmail.com>
Date: Fri, 7 Mar 2025 13:02:48 +0000
Subject: [PATCH 1/2] refactor(messenger-main): reduce unnecessary DOM elements
 by conditionally rendering MembersSidekick to improve performance

---
 src/apps/messenger/Main.test.tsx | 12 ++++++++++++
 src/apps/messenger/Main.tsx      |  5 ++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/apps/messenger/Main.test.tsx b/src/apps/messenger/Main.test.tsx
index 1e4cf7d97..ec4257599 100644
--- a/src/apps/messenger/Main.test.tsx
+++ b/src/apps/messenger/Main.test.tsx
@@ -5,6 +5,7 @@ import { Container as Main, Properties } from './Main';
 import { MessengerChat } from '../../components/messenger/chat';
 import { MessengerFeed } from '../../components/messenger/feed';
 import { JoiningConversationDialog } from '../../components/joining-conversation-dialog';
+import { MembersSidekick } from '../../components/sidekick/variants/members-sidekick';
 
 jest.mock('../../lib/web3/thirdweb/client', () => ({
   getThirdWebClient: jest.fn(),
@@ -23,6 +24,7 @@ describe(Main, () => {
       isSocialChannel: false,
       isJoiningConversation: false,
       isConversationsLoaded: true,
+      isSecondarySidekickOpen: false,
       ...props,
     };
 
@@ -105,4 +107,14 @@ describe(Main, () => {
 
     expect(wrapper).not.toHaveElement(MessengerFeed);
   });
+
+  it('should render members sidekick when is secondary sidekick open', () => {
+    const wrapper = subject({
+      context: { isAuthenticated: true },
+      isSecondarySidekickOpen: true,
+      isConversationsLoaded: true,
+    });
+
+    expect(wrapper).toHaveElement(MembersSidekick);
+  });
 });
diff --git a/src/apps/messenger/Main.tsx b/src/apps/messenger/Main.tsx
index 04809cec5..75bdde6ab 100644
--- a/src/apps/messenger/Main.tsx
+++ b/src/apps/messenger/Main.tsx
@@ -22,12 +22,14 @@ export interface Properties {
   isSocialChannel: boolean;
   isJoiningConversation: boolean;
   isConversationsLoaded: boolean;
+  isSecondarySidekickOpen: boolean;
 }
 
 export class Container extends React.Component<Properties> {
   static mapState(state: RootState): Partial<Properties> {
     const {
       chat: { activeConversationId, isJoiningConversation, isConversationsLoaded },
+      groupManagement: { isSecondarySidekickOpen },
     } = state;
 
     const currentChannel = denormalize(activeConversationId, state) || null;
@@ -37,6 +39,7 @@ export class Container extends React.Component<Properties> {
       isSocialChannel: currentChannel?.isSocialChannel,
       isJoiningConversation,
       isConversationsLoaded,
+      isSecondarySidekickOpen,
     };
   }
 
@@ -57,7 +60,7 @@ export class Container extends React.Component<Properties> {
                 this.props.isValidConversation &&
                 (this.props.isSocialChannel ? <MessengerFeed /> : <MessengerChat />)}
             </div>
-            {this.props.isConversationsLoaded && <MembersSidekick />}
+            {this.props.isConversationsLoaded && this.props.isSecondarySidekickOpen && <MembersSidekick />}
 
             <FeatureFlag featureFlag='enableDevPanel'>
               <DevPanelContainer />

From 2172f653cc568fdd13a22d2cd4cc7712c5bdbb63 Mon Sep 17 00:00:00 2001
From: dominic <domw30@gmail.com>
Date: Fri, 7 Mar 2025 13:15:08 +0000
Subject: [PATCH 2/2] refactor(feed-chat): reduce unnecessary DOM elements by
 conditionally rendering MembersSidekick to improve performance

---
 src/apps/feed/components/feed-chat/index.test.tsx | 14 ++++++++++++++
 src/apps/feed/components/feed-chat/index.tsx      |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/apps/feed/components/feed-chat/index.test.tsx b/src/apps/feed/components/feed-chat/index.test.tsx
index 40f282e3a..1bdd8abf8 100644
--- a/src/apps/feed/components/feed-chat/index.test.tsx
+++ b/src/apps/feed/components/feed-chat/index.test.tsx
@@ -7,6 +7,7 @@ import { validateFeedChat } from '../../../../store/chat';
 import { send } from '../../../../store/messages';
 import { config } from '../../../../config';
 import { Spinner } from '@zero-tech/zui/components/LoadingIndicator';
+import { MembersSidekick } from '../../../../components/sidekick/variants/members-sidekick';
 
 describe('FeedChatContainer', () => {
   const subject = (props: any = {}) => {
@@ -135,6 +136,19 @@ describe('FeedChatContainer', () => {
     expect(validateFeedChat).toHaveBeenLastCalledWith(`new-zid:${config.matrixHomeServerName}`);
   });
 
+  it('should render members sidekick when is secondary sidekick open', () => {
+    const wrapper = subject({
+      zid: 'test-zid',
+      channel: { id: 'channel-id' },
+      activeConversationId: 'conversation-id',
+      isJoiningConversation: true,
+      isConversationsLoaded: true,
+      isSecondarySidekickOpen: true,
+    });
+
+    expect(wrapper).toHaveElement(MembersSidekick);
+  });
+
   describe('mapState', () => {
     const getState = (state: any) =>
       ({
diff --git a/src/apps/feed/components/feed-chat/index.tsx b/src/apps/feed/components/feed-chat/index.tsx
index 0c3231712..6df70e065 100644
--- a/src/apps/feed/components/feed-chat/index.tsx
+++ b/src/apps/feed/components/feed-chat/index.tsx
@@ -209,7 +209,7 @@ export class Container extends React.Component<Properties> {
               {this.renderHeader()}{' '}
               {this.renderBody(this.props.isJoiningConversation || !this.props.isConversationsLoaded)}
             </Panel>
-            <MembersSidekick className={styles.MembersSidekick} />
+            {this.props.isSecondarySidekickOpen && <MembersSidekick className={styles.MembersSidekick} />}
           </>
         )}
       </>