Added test tabs, got closing and switching working

app/web/src/components/IdeEditor/IdeEditor.tsx

@@ -73,16 +73,45 @@ const IdeEditor = ({ Loading }) => {
       className="h-full"
       onKeyDown={handleSaveHotkey}
     >
-      <Editor
+      { (state.models.length > 1) && (
-        defaultValue={state.code}
+        <fieldset
-        value={state.code}
+          className='bg-ch-gray-700 text-ch-gray-300 flex m-0 p-0'>
-        theme={theme}
+          { state.models.map((model, i) => (
-        loading={Loading}
+            <label key={model.type + '-' + i}
-        // TODO #247 cpp seems better than js for the time being
+              className={'flex items-center gap-2 px-4 py-1 block m-0 select-none relative bg-ch-gray-600 ' + ((state.currentModel === i) && 'bg-ch-gray-800')}>
-        defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}
+              { model.label }
-        language={ideTypeToLanguageMap[state.ideType] || 'cpp'}
+              <input
-        onChange={handleCodeChange}
+                type='radio'
-      />
+                name='models'
+                className='sr-only absolute inset-0'
+                value={i}
+                checked={state.currentModel === i}
+                onChange={() => thunkDispatch({ type: 'switchEditorModel', payload: i })} />
+            { (model.type !== 'code') && 
+              <button onClick={() => thunkDispatch({ type: 'removeEditorModel', payload: i })}
+                className='block p-1 m-.5 hover:bg-ch-gray-550' >
+                <svg viewBox='0 0 5 5' className='w-4 text-ch-gray-300'>
+                  <path stroke='currentColor' d='M 1 1 l 3 3 M 1 4 l 3 -3' strokeLinecap='round' strokeWidth='.5' />
+                </svg>
+              </button>
+            }
+            </label>
+          )) }
+        </fieldset>
+      )}
+      { (state.models[state.currentModel].type === 'code') 
+        ? <Editor
+          defaultValue={state.code}
+          value={state.code}
+          theme={theme}
+          loading={Loading}
+          // TODO #247 cpp seems better than js for the time being
+          defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}
+          language={ideTypeToLanguageMap[state.ideType] || 'cpp'}
+          onChange={handleCodeChange}
+        />
+        : <pre className="bg-ch-gray-800 text-ch-gray-300 p-6 h-full">{ state.models[state.currentModel].content }</pre>
+      }
     </div>
   )
 }

app/web/src/helpers/cadPackages/cadQuery/userGuide.md

@@ -0,0 +1,12 @@
+---
+"Written with": Python
+"Kernal type": BREP
+---
+# CadQuery
+
+CadQuery is an intuitive, easy-to-use Python library for building parametric 3D CAD models. It has several goals:
+
+- Build models with scripts that are as close as possible to how you’d describe the object to a human, using a standard, already established programming language
+- Create parametric models that can be very easily customized by end users
+- Output high quality CAD formats like STEP and AMF in addition to traditional STL
+- Provide a non-proprietary, plain text model format that can be edited and executed with only a web browser

app/web/src/helpers/cadPackages/jsCad/userGuide.md

@@ -0,0 +1,7 @@
+---
+"Written with": JavaScript
+"Kernal type": BREP
+---
+# JSCAD
+
+JSCAD is an open source set of modular, browser and command line tools for creating parametric 2D and 3D designs with Javascript code. It provides a quick, precise and reproducible method for generating 3D models, and is especially useful for 3D printing applications.

app/web/src/helpers/cadPackages/openScad/userGuide.md

@@ -0,0 +1,7 @@
+---
+"Written with": C+-like
+"Kernal type": BREP
+---
+# OpenSCAD
+
+OpenSCAD is a solid 3D modeler that enables the creation of parametric models using its scripting language. Models are created by utilizing a technique called constructive solid geometry. According to this technique, simple objects can be transformed and combined in order to create almost any complex model.

app/web/src/helpers/hooks/useIdeState.ts

@@ -95,10 +95,18 @@ interface XYZ {
   z: number
 }
 
+interface EditorModel {
+  type: 'code' | 'guide'
+  label: string
+  content?: string
+}
+
 export interface State {
   ideType: 'INIT' | CadPackageType
   consoleMessages: { type: 'message' | 'error'; message: string; time: Date }[]
   code: string
+  models: EditorModel[]
+  currentModel: number
   objectData: {
     type: 'INIT' | ArtifactTypes
     data: any
@@ -136,6 +144,11 @@ export const initialState: State = {
     { type: 'message', message: 'Initialising', time: new Date() },
   ],
   code,
+  models: [
+    { type: 'code', label: 'Code', },
+    { type: 'guide', label: 'Test', content: '# Testing!' },
+  ],
+  currentModel: 0,
   objectData: {
     type: 'INIT',
     data: null,
@@ -269,6 +282,47 @@ const reducer = (state: State, { type, payload }): State => {
         ...state,
         sideTray: payload,
       }
+    case 'switchEditorModel':
+      return {
+        ...state,
+        currentModel: payload,
+      }
+    case 'addEditorModel':
+      return {
+        ...state,
+        models: [
+          ...state.models,
+          payload,
+        ]
+      }
+    case 'removeEditorModel':
+      return {
+        ...state,
+        models: [
+          ...state.models.slice(0, payload),
+          ...state.models.slice(payload + 1),
+        ],
+        currentModel: (payload === 0) ? 0 : payload - 1,
+      }
+    case 'updateEditorModel': {
+      let newModels = [...state.models]
+      newModels[state.currentModel].content = payload
+      return {
+        ...state,
+        models: newModels,
+      }
+    }
+    case 'reorderEditorModels': {
+      let newModels = [
+        ...state.models.slice(0, state.currentModel),
+        ...state.models.slice(state.currentModel + 1)
+      ].splice(payload, 0, state.models[state.currentModel])
+      return {
+        ...state,
+        models: newModels,
+        currentModel: payload,
+      }
+    }
     default:
       return state
   }