Implement the "Activity toolbar" layout in a story

[stropitek]

Continuation of https://github.com/zakodium-oss/react-science/issues/243, but the idea here is not to create a component but an example of implementation with a story.

The story should have the following structured layout:

• I'm using the term "activity", with the idea of it containing all the functionalities of a sub-domain of the application. I find it quiet appropriate. You can use this term in the source code as well.
• It has a large toolbar on the right similar to https://react-science.pages.dev/stories/?path=/story/components-toolbar--panel-toolbar. It is always visible.
• It has a split pane with the main content on the left (just use a placeholder) and the accordion on the right.

Split pane behaviour:

• If no active elements => split pane slider disappears (even the slider is not visible)
• Double click split pane to show / hide accordion without inactivating activities.
• Remember last size of accordion.

Accordions:

• Each accordion's header has a toolbar which is reserved to configure the activity. Here I have only put the "minimize" to remove it, but we could easily imagine other functionalities (pin, expand etc.) that might be added later.
• Below the header is the activity's specific toolbar and content.

@wadjih-bencheikh18 please report here or in the PR any shortcomings of the current APIs of react-science for achieving this layout, and let's try to fix them along the way.

[wadjih-bencheikh18]

In majority of apps, they dont use these sides icon to add accordions (each icon is an accordion) because technically the height can support more closed accordions then icons before the need of scroll.

But this kind of side icons is used to group accordions

Icon1 -> open a group of accordions Icon2 -> open diffrent group of accordions ...

Example: Vs code