Show chat panel when opening a video room with unread messages (#8812)

* Show chat panel when opening a video room with unread messages

* Remove unnecessary calls to private methods in tests

* Make room ID mandatory when toggling the right panel

* Restore the isViewingRoom check

* Test RightPanelStore

* Make the constructor private again

* Add even more tests

* Fix onReady

src/components/structures/LoggedInView.tsx

@@ -493,7 +493,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                 break;
             case KeyBindingAction.ToggleRoomSidePanel:
                 if (this.props.page_type === "room_view") {
-                    RightPanelStore.instance.togglePanel();
+                    RightPanelStore.instance.togglePanel(null);
                     handled = true;
                 }
                 break;

src/components/structures/RightPanel.tsx

@@ -91,12 +91,6 @@ export default class RightPanel extends React.Component<IProps, IState> {
             currentCard = RightPanelStore.instance.currentCardForRoom(props.room.roomId);
         }
 
-        if (currentCard?.phase && !RightPanelStore.instance.isPhaseValid(currentCard.phase, !!props.room)) {
-            // XXX: We can probably get rid of this workaround once GroupView is dead, it's unmounting happens weirdly
-            // late causing the app to soft-crash due to lack of a room object being passed to a RightPanel
-            return null; // skip this update, we're about to be unmounted and don't have the appropriate props
-        }
-
         return {
             cardState: currentCard?.state,
             phase: currentCard?.phase,
@@ -142,7 +136,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
             // When the user clicks close on the encryption panel cancel the pending request first if any
             this.state.cardState.verificationRequest.cancel();
         } else {
-            RightPanelStore.instance.togglePanel();
+            RightPanelStore.instance.togglePanel(this.props.room?.roomId);
         }
     };
 

src/components/structures/RoomView.tsx

@@ -361,7 +361,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         ) {
             // hide chat in right panel when the widget is minimized
             RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary });
-            RightPanelStore.instance.togglePanel();
+            RightPanelStore.instance.togglePanel(this.state.roomId);
         }
         this.checkWidgets(this.state.room);
     };
@@ -1020,6 +1020,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         this.updatePermissions(room);
         this.checkWidgets(room);
 
+        if (
+            this.getMainSplitContentType(room) !== MainSplitContentType.Timeline
+            && RoomNotificationStateStore.instance.getRoomState(room).isUnread
+        ) {
+            // Automatically open the chat panel to make unread messages easier to discover
+            RightPanelStore.instance.setCard({ phase: RightPanelPhases.Timeline }, true, room.roomId);
+        }
+
         this.setState({
             tombstone: this.getRoomTombstone(room),
             liveTimeline: room.getLiveTimeline(),

src/components/views/right_panel/EncryptionPanel.tsx

@@ -122,7 +122,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
                 state: { member, verificationRequest: verificationRequest_ },
             });
         }
-        if (!RightPanelStore.instance.isOpen) RightPanelStore.instance.togglePanel();
+        if (!RightPanelStore.instance.isOpen) RightPanelStore.instance.togglePanel(null);
     }, [member]);
 
     const requested =

src/components/views/right_panel/HeaderButtons.tsx

@@ -70,10 +70,10 @@ export default abstract class HeaderButtons<P = {}> extends React.Component<IPro
     public setPhase(phase: RightPanelPhases, cardState?: Partial<IRightPanelCardState>) {
         const rps = RightPanelStore.instance;
         if (rps.currentCard.phase == phase && !cardState && rps.isOpen) {
-            rps.togglePanel();
+            rps.togglePanel(null);
         } else {
             RightPanelStore.instance.setCard({ phase, state: cardState });
-            if (!rps.isOpen) rps.togglePanel();
+            if (!rps.isOpen) rps.togglePanel(null);
         }
     }
 

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -209,7 +209,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
 
     private onThreadsPanelClicked = (ev: ButtonEvent) => {
         if (RoomHeaderButtons.THREAD_PHASES.includes(this.state.phase)) {
-            RightPanelStore.instance.togglePanel();
+            RightPanelStore.instance.togglePanel(this.props.room?.roomId);
         } else {
             showThreadPanel();
             PosthogTrackers.trackInteraction("WebRoomHeaderButtonsThreadsButton", ev);