Right panel store refactor

[toger5]

This refactors the right panel to behave as proposed in this hackmd

What actually changes:

I tired to keep the changes in this PR really minimal. The actual navigation (in particular the back button) of the right panel should not change! The only difference should be that everything is now per room.

What is planned (in another PR)

There will be a follow up PR that uses push and pop methods to handle the right panel stack. This should then behave as following:

                                     Timeline in the right panel 
-push-a-thread-->                    Thread in the right panel
-push-a-member-profile-of-userA-->   Show member panel with userA
-call-pop-->                         Thread in the right panel
-call-pop-->                         Timeline in the right panel

(^ this does not work yet!)

Things to test:

• verification flows
• the right panel needs to be per room, changing rooms should change the right panel
• The correct member should be shown when the right panel shows a member and the room gets changed from roomA -> roomB -> roomA
• The correct Thread should be shown when the right panel shows a thread and the room gets cahnged form roomA -> roomB -> roomA
• Right panel phase should be stored on page reload (for all rooms)
• Thread right panel should be stored on page reload
• Member right panel should be stored on page reload
• Communities need to work as before (except with per room panels)

Copied Section from the hack MD:

---

---

Store phase history and associated data per room

The store gets extended by a room dictionary storing an array of RightPanelPhaseState's per room.

The room dictionary contains the history of per room with the history of RightPanelPhaseState objects in an array.

A RightPanelPhaseState consists of the phase of the right panel. And the associated state (like the member which is shown, the ID of the shown thread or the parameters of the verification request.)

Optionally a global RightPanelPhaseState can be stored, if it is present the right panel is always visible.

private global: {
        phase: RightPanelPhase, // Notification
        // The state saves the state parameters of the phase when it was left
        state: {
            // phase == EncryptionPanel
            verificationRequest: VerificationRequest,
            member: RoomMember,
            // phase == Group...
            isUserPrivilegedInGroup: null,
            // phase == RoomMemberList
            searchQuery: String,
        }
    }
private byRoom: {
        [roomId: string]: {
            // The hidden state is stored per room as well.
            hidden: boolean,
            // Each room has an array of phases for navigating back.
            // Only the last element is shown when rendering the rightPanel.
            [{
                phase: RightPanelPhase,
                // The state saves the state parameters of the phase when it was left
                state: {
                    // phase == EncryptionPanel
                    verificationRequest: VerificationRequest,
                    member: RoomMember,
                    // phase == Group...
                    isUserPrivilegedInGroup: null,
                    // phase == RoomMemberList
                    searchQuery: String,
                }
            }]
        }
    } = {};
private 

Pros:

• Per room right panel store
• History with different states of the same phase:
  RoomMemberPanel(showing Member1) ... some other phases ... RoomMemberPanel(showing Member2)
• This could actually simplify the right panel code and make it easier to work on for future changes.

Cons:

• Quite a significant change.
• This also invites changing what we do with the refireParams and the lastRoomPhaseParams used to get access to the last phase. And maybe even tackle other issues like, How the state of the RightPanel is calculated (This could well be a pro argument, but it would most definitely increase the time it takes for it to be done)
• Lots of testing would be required to make sure all the special cases are still behaving correctly.

---

This change is marked as an internal change (Task), so will not be included in the changelog.

Preview: https://61d58eb1fe1fba3968062921--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[toger5]

Tested the community panel and it seems to also work great. The right panel is shown by community.

[jryans]

Thanks, this part looks good code wise! 😄

Now we just need to get a Design review, and then this should be ready to merge.

[jryans]

A few new issues to resolve here as discussed.

[jryans]

Great, this side looks ready to go! 😄