Implement activity-toolbar story

[wadjih-bencheikh18]

closes : https://github.com/zakodium-oss/react-science/issues/767

https://767-implement-the-activity-t.react-science.pages.dev/stories/?path=/story/components-toolbar--activity-toolbar

[cloudflare-workers-and-pages[bot]]

Deploying react-science with    Cloudflare Pages

Latest commit:	5606a20
Status:	✅  Deploy successful!
Preview URL:	https://42d431c6.react-science.pages.dev
Branch Preview URL:	https://767-implement-the-activity-t.react-science.pages.dev

View logs

[lpatiny]

I like the functionality and that the panels fully disappear when no panel is open.

Not sure if it is now it should be implemented and @stropitek should decide. Here are my thoughts and probably we should create new issues:

• For the split panel could you take care that in the demo it closes to the right and not to the left ? I would like how it collapse. One of the current issue is that nobody sees that the panels are collapsed and that there is a way to open them. I think that if they are collapse a click on the new toolbar should always open the panels if it is not open, activate the panel if it is not activate butnot desactivate a panel if it is active.
• We we add in the header of the panels a 'close' icon.
• Are we able to save the status, which panel are open / close ?
• Could we think about reordering the panels and save the new order. Header of panels could be draggable.
• I would like to see this new feature implemented in the demo application

[stropitek]

• For the split panel could you take care that in the demo it closes to the right and not to the left ?

I agree with that.

• Are we able to save the status, which panel are open / close ?

The goal of this PR is to:

• Experiment with the user experience for those "activities", and see where we want to go.
• See if anything is missing from the building block components in react-science to achieve what we want.

Saving the opened / closed panels is related to the state and will be handled in the final application, not in react-science.

• We we add in the header of the panels a 'close' icon

Yes

• Could we think about reordering the panels and save the new order. Header of panels could be draggable.

Not in scope, maybe in the future (let's focus on more fundamental questions first).

• I would like to see this new feature implemented in the demo application

With @targos we think that the demo app should be removed ultimately and we should only keep stories. We see react-science as a collection of small components to build complex applications, not large and complex components to "easily" build an app.

https://github.com/zakodium-oss/react-science/issues/767#issuecomment-2412359116

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

I do agree with that. I think if we can move away from accordions and instead have 1 to 2 activities speparated by a split slider that would be great. We don't need 2 ways to hide the same content, 1 is enough. @wadjih-bencheikh18 I got inspired by Webstorm, which does things slightly differently to VS code:

@wadjih-bencheikh18 I will discuss this with @lpatiny and @targos and come back to you with more specific instructions.

[stropitek]

Here is what we decided:

• Each activity in the right part of the SplitPane should no longer be an Accordion. It should be a similar header without the possibility to show / hide the content.
• There should be an action to hide that activity in the header (similar to clicking on an active item in the activity bar)
• Double click the split pane slider should close the part on the right, not the part on the left.

Please wait for https://github.com/zakodium-oss/react-science/pull/776 to be merged and use the ActivityBar component to go on with this.

[wadjih-bencheikh18]

• Each activity in the right part of the SplitPane should no longer be an Accordion. It should be a similar header without the possibility to show / hide the content.

What should the styling of the activity headers look like? Should I keep the same style as the accordion headers or opt for a simpler design? Also, should these activities remain fixed to the right side of the SplitPane, or should they expand to take up the full height, similar to when the accordions are open?

[stropitek]

What should the styling of the activity headers look like? Should I keep the same style as the accordion headers or opt for a simpler design? Also, should these activities remain fixed to the right side of the SplitPane, or should they expand to take up the full height, similar to when the accordions are open?

They should behave similarly to accordions, except they are always open and cannot be collapsed / uncollapsed. For the styling, I let it up to you, if you think you can do something nicer that fits well with the blueprintjs components, then go ahead. I think it's important that visually it is easy to see the delimitation between different panels.

We haven't discussed this with @lpatiny and @targos yet, but I think it would be nice to have resizable panels. Rather than using our SplitPane component, I'd use a library to do that: https://github.com/bvaughn/react-resizable-panels.

[lpatiny]

For resizing (and also reordering) could be achieved in another PR maybe. But yes we will need those features.