Create ToolWindow component

[targos]

Similar to VSCode with an icon to open it.

[stropitek]

Do a POC based on:

cheminfo/nmrium#2782 (comment)

I would suggest that we create a new component ToolbarPanels

return (
<ToolbarPanels panels={[
    { id: 'panel1', renderPanel: () => <Accordion.Item ... />, icon: 'settings", isOpen: true }
  ]}
/>

The component could either be used as a controlled or uncontrolled component.

It would be in uncontrolled mode if another prop is passed (e.g. initialOpen={['panel1']}}. This is just a suggestion and the POC should focus on the controlled component.

[targos]

I don't see the relation with toolbars (for the name).

[stropitek]

I don't see the relation with toolbars (for the name).

Yes on second thought it's not semantically related.

In Webstorm they are called "Tool windows", in VS code the "Activity bar", I'm okay with the former.

[stropitek]

@wadjih-bencheikh18 are you willing to take this on?

We want to do something that looks like a vertical toolbar, but opens panel windows. To give you something more visual, it would behave similarly to webstorm's "Tool windows":

CleanShot.2024-02-20.at.08.28.58.mp4

VSCode also has a similar concept but calls it "Activity bar".

Start by making the simplest possible POC:

• A vertical toolbar, slighly bigger than our existing toolbar (including bigger icons)
• Each tool can be on or off, and you can toggle their state by clicking on the toolbar.
• Tools which are "on" render an accordion with some placeholder content. The accordions can be collapsed as usual.