Add new viewer and console toolbar (handle + settings)

Related to #360

app/web/src/components/IdeContainer/IdeContainer.js

@@ -2,7 +2,7 @@ import { useContext, useRef, useEffect } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
-import IdeEditor, { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
+import IdeEditor from 'src/components/IdeEditor'
 import IdeViewer from 'src/components/IdeViewer'
 import IdeConsole from 'src/components/IdeConsole'
 import 'react-mosaic-component/react-mosaic-component.css'
@@ -64,15 +64,7 @@ const IdeContainer = () => {
           return (
             <MosaicWindow
               path={path}
-              renderToolbar={() => (
-                <div
-                  className="text-xs text-gray-400 pl-4 w-full py-px font-bold leading-loose border-b border-gray-700"
-                  style={matchEditorVsDarkTheme.lighterBg}
-                >
-                  {id}
-                  {id === 'Editor' && ` (${state.ideType})`}
-                </div>
-              )}
+              renderToolbar={() => <div/>} // needs an empty element, otherwise it adds it's own toolbar
               className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`}
             >
               {id === 'Viewer' ? (