Add maximise widget functionality

[toger5]

Fixes: element-hq/element-web#19619
Fixes: element-hq/element-web#19621
Fixes: element-hq/element-web#19760

This implements the initial maximise functionality for widgets.
So far it contains the following changes:

• Extending the widget Drawer to support widget maximization
• Adapt margins to make the maximised widget centered and with equal margins.
• Adds a MainSplitContentType enum in RoomView to decide what should be shown in the mainSplit (this enum should make it easy to add full frame video as well. Just a new case would be required)
• Extends the WidgetLayoutStore class with a new container ("center")
  • adds some helper functions to make the code more readable
  • adds logic to the moveToContainer function to make it behave like discussed during design
• Adds buttons in the RightPanel and on the AppTiles with the appropriate icons to maximise and minimise.

---

Here's what your changelog entry will look like:

✨ Features

• Add maximise widget functionality (#7098). Fixes Add maximise widget actions element-hq/element-web#19619, Share maximised widget state to room when setting layout for everyone element-hq/element-web#19621 Widget margins in the right panel (WidgetCard) are too small element-hq/element-web#19760 and Add maximise widget actions element-hq/element-web#19619. Contributed by @toger5.

Preview: https://6193b4d57d352407b84742e9--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.

[jryans]

Good progress so far, thanks! 😄 I've added a few comments on various details, and I'll also request a review from @turt2live because I want to ensure the container changes make sense to them as well.

It would be nice to have a small test of the WidgetLayoutStore movement between containers if that seems feasible to add. There's no test of this store today, so it could be challenging... I'd suggest spending a small amount of time investigating other store tests like SpaceStore-test to get ideas for a basic one here.

[jryans]

Travis is on holiday this week, so I'll ponder the questions I initially directed at them.

[gaelledel]

Great job!
Just a few remarks

• We need to make sure the Maximise button is at the same size as the other buttons, are these 16px? If any other size is needed, let me know and I can make icons at the right size for you

• We need to remove the right chevrons for all items in the panel so we're not as limited with the existing space for our new control. Edit(Timo): This is tracked in another issue and will be solved in a separate PR.

• The widget frame seems cropped when maximised. I suppose this is still work in progress though

[jryans]

We need to remove the right chevrons for all items in the panel so we're not as limited with the existing space for our new control.

We do have element-hq/element-web#19644 tracking this item, so we could handle that in a separate PR to keep this one smaller and easier to review.

[toger5]

I added, that this fixes: element-hq/element-web#19760 (this is done in the last 3 commits)
and changed + resized the icons to be a little bit smaller

[jryans]

Thanks, a few bits to tweak, and a conflict to resolve as well.

[jryans]

A few small bits to clean up, almost there! 😄

[jryans]

These don't seem correct to me... The height is forcing the icon to appear at the top of the expanded event instead of the bottom, and the width seems too small. I believe they can just be removed, but please test yourself as well.

To test this feature, enable "Show hidden events in timeline" in labs and look for a hidden event like a reaction. It will have an expand / collapse icon. When toggling between expand and collapse, the icon should always be under your cursor (bottom right of the event when expanded).

[jryans]

For the updated icon, I believe this should be changed to 5px to ensure the centre of the icon is always under the cursor when toggling states.

Suggested change

	margin-bottom: 7px;
	margin-bottom: 5px;

[jryans]

Thanks, looks good to me! 😄