Add console toggle to side-tray

[hrgdavor]

The IDE console isn't always needed, so it would be nice to be able to hide it.

We want to add a visibility toggle to the side tray

full designs here

The components that make up the options int he side tray are defined in app/web/src/components/IdeSideBar/sidebarConfig.tsx in the settingsConfig array.
Changing to toggle will need to dispatch an action to show or hide the console.
Here is an example that will hide the console

thunkDispatch({ type: 'setLayout', payload:{ message:{ direction: 'row', first: 'Editor', second: 'Viewer'}}})

The thunkDispatch and state can be accessed using the useIdeContext() (search for useIdeContext to see examples in the repo).

The actions update state, handled in app/web/src/helpers/hooks/useIdeState.ts, pay attention to layout property on the state object as that's what controls the panels in the IDE. W're using react-mosaic-component so their docs will likely be useful.

---

Follow the instructions in CONTRIBUTING.md to get setup, and of course ask for help here or in the dev-help discord channel.

If you'd like to contribute the CadHub but this issue is taken or you'd prefer something else, have a look at #535 to see if there's something else you would like

[Irev-Dev]

@franknoirot, @hrgdavor,

How about we add a toggle into the side tray?

[hrgdavor]

I would try, have not done a PR for some time :)

[franknoirot]

@hrgdavor @Irev-Dev how does this look? https://www.figma.com/file/VUh53RdncjZ7NuFYj0RGB9/CadHub?node-id=2091%3A4535

@hrgdavor if you'd like to work on this I feel like you can get it working with a normal checkbox and I can make a Toggle component like this one to swap out later.

[hrgdavor]

Deal

[Irev-Dev]

Some context:
We're using a library for the IDE panels react-mosaic-component , it's used in app/web/src/components/IdeContainer/IdeContainer.tsx and the layout is controlled by the layout property in the app state in app/web/src/helpers/hooks/useIdeState.ts.
I don't think it will be much more than dispatching the event "setLayout" with the new layout (i.e. with or without the console).
And than dispatching "resetLayout" to put it back.
I might be wrong though.

[Irev-Dev]

I've overhauled the description to be much more detailed.

[Irev-Dev]

Resolved by #545