Add right panel chat timeline

[toger5]

Fixes: element-hq/element-web#19633
This adds a new possible card for the right panel: TimelineCard

• This card shows the timeline and allows to send messages
• When pressing on a thread EventTile, it shows the thread. The back arrow brings you back to the timeline.
  • This is executed by providing a new state parameter previousPhase for the right panel that is updated using the AfterRightPanelPhaseChangePayload dispatch event payload.

This does not include:

• only showing the rightPanelTimeline in rooms that have a maximised widget: Remember local per-room state chat right panel element-hq/element-web#19634
• showing the correct icons (only core navigation) if a room has a maximised widget:Show only core navigation buttons when widget is maximised element-hq/element-web#19632
  This should be merged after: Fixes following threads design implementation review #7100
  

---

Here's what your changelog entry will look like:

✨ Features

• Add right panel chat timeline (#7112). Fixes Add main timeline chat in right panel when widget is maximised element-hq/element-web#19633 and Add main timeline chat in right panel when widget is maximised element-hq/element-web#19633. Contributed by @toger5.

Preview: https://61a4d397366dc64538913ff2--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.

[gaelledel]

It seems the behaviour for when Threads is enabled hasn't been implemented.
See the mockups here https://www.figma.com/file/k2bzeSQmUipBd5vGsTzMUl/Maximised-widgets?node-id=130%3A20948
The Threads button should disappear when entering the maximised widget layout
It should only be possible to view a specific thread within the chat panel
When users click on the thread, it leads to that specific thread only
Users can go back, to see the core chat again

[gaelledel]

I wonder if it'd be possible to tailor the chat layout a little bit more? There is a lot of empty space (see marks on image).

[toger5]

The gap between the two widgets need to be revisited because otherwise we run into issues with the scroll bar. This might be a little bit more effort because the widget container should also have a gap to the right window when the right panel is closed. Is the gap between the widget container and the right panel a blocker? Or just a nice to have?
I can try to get the area for the profile pictures smaller however.

[toger5]

The profile picture spacing is very entangled with how the threads view (that also should be the case, so that the right panel timeline is similar to the thread panel) I think this change should also be done in a separate PR and with input from the threads team.

[toger5]

@gaelledel I tracked the mentioned issues: element-hq/element-web#19905 and element-hq/element-web#19904

[gaelledel]

@gaelledel I tracked the mentioned issues: vector-im/element-web#19905 and vector-im/element-web#19904

Sorry. I am unable to see a preview of the work

[toger5]

What preview do you mean?
This pr is previewed here: 619e5fc067f49471c2699ff2--matrix-react-sdk.netlify.app
The links I sent were issues to track the things that are not part of this pr. (but I haven't implemented them yet)
Basically I am proposing to tackle the issues separately and not squeeze them into this pr. So this can be merged with a clear list of changes.

[gaelledel]

• I will synch with @janogarcia (designer on threads project) regarding the spacing tweaks for the panel

• Could you remove the overflow menu on the panel nav?

- [ ] Instead please add an overflow menu and only The **"copy link to thread option"** on hover on the thread message. Like below

• Can anything be done regarding the issue below? The timestamp overlaps the chevron. Perhaps this is for @janogarcia to discuss with the threads team.

[toger5]

The issues @gaelledel discovered definitly need addressing. I am not sure though, if this should be added to this PR (would require the consecutive pr's to be merged and I would add changes related to threads in a commit that is called "Add right panel chat timeline" which might be intuitive?
@jryans should we open new issues/pr's or should I add those features here?

[gaelledel]

I am hovering on a thread within the chat panel and still cannot see the contextual menu with the "copy widget link" option

[gaelledel]

See the desired result below

[jryans]

The issues @gaelledel discovered definitly need addressing. I am not sure though, if this should be added to this PR (would require the consecutive pr's to be merged and I would add changes related to threads in a commit that is called "Add right panel chat timeline" which might be intuitive? @jryans should we open new issues/pr's or should I add those features here?

Since this area does overlap with threads work, I agree with @toger5's instinct that we should capture this feedback in issues for the project and improve it in follow up PRs. They should be fast to review as well (both code and design wise) as they'll likely be smaller tweaks in a focused area.

[toger5]

The contextual menu now hides/shows dependent on the content of the main split area.
If there is the timeline the option to view the thread in the timeline appears


The same is done for the button on the room header

This is to clarify my changes.
Those two changes were necessary anyways since the button makes no sense if the main timeline is not shown.
Adding the "copy link to thread" option to the context menu of the right panel timeline could be done as well.