Pretty up the IDE a little

web/src/components/IdeConsole/IdeConsole.js

@@ -1,17 +1,35 @@
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 
 const IdeConsole = () => {
   const { state } = useContext(IdeContext)
+  useEffect(() => {
+    const element = document.querySelector('.console-tile .mosaic-window-body')
+    if (element) {
+      element.scrollTop = element.scrollHeight - element.clientHeight
+    }
+  }, [state.consoleMessages])
+  const matchEditorVsDarkThemeBg = { backgroundColor: 'rgb(30,30,30)' }
+  const matchEditorVsDarkThemeText = { color: 'rgb(212,212,212)' }
+  const matchEditorVsDarkThemeTextBrown = { color: 'rgb(206,144,120)' }
   return (
-    <div className="p-8 border-2 m-2 overflow-y-auto">
+    <div className="p-2 px-4 min-h-full" style={matchEditorVsDarkThemeBg}>
       <div>
-        {state.consoleMessages?.map(({ type, message }, index) => (
+        {state.consoleMessages?.map(({ type, message, time }, index) => (
           <pre
-            className={'font-mono ' + (type === 'error' ? 'text-red-500' : '')}
+            className="font-mono text-sm"
+            style={matchEditorVsDarkThemeText}
             key={message + index}
           >
-            {message}
+            <div
+              className="text-xs font-bold pt-2"
+              style={matchEditorVsDarkThemeTextBrown}
+            >
+              {time?.toLocaleString()}
+            </div>
+            <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>
+              {message}
+            </div>
           </pre>
         ))}
       </div>

web/src/components/IdeContainer/IdeContainer.js

@@ -58,15 +58,22 @@ const IdeContainer = () => {
   }, [])
 
   return (
-    <div id="cadhub-ide" className="flex-auto h-full">
+    <div id="cadhub-ide" className="mosaic-toolbar-overrides flex-auto h-full">
       <Mosaic
         renderTile={(id, path) => {
-          const title = id === 'Editor' ? `${id} (${state.ideType})` : id
           return (
             <MosaicWindow
               path={path}
-              title={title}
-              className={id.toLowerCase()}
+              renderToolbar={() => (
+                <div
+                  className="text-xs text-gray-400 pl-4 w-full py-px font-bold leading-loose border-b border-gray-700"
+                  style={{ backgroundColor: 'rgb(55,55,55)' }}
+                >
+                  {id}
+                  {id === 'Editor' && ` (${state.ideType})`}
+                </div>
+              )}
+              className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`}
             >
               {id === 'Viewer' ? (
                 <div id="view-wrapper" className="h-full" ref={viewerDOM}>

web/src/components/IdeEditor/IdeEditor.js

@@ -1,5 +1,4 @@
-import { useContext, useEffect, Suspense, lazy } from 'react'
-import { isBrowser } from '@redwoodjs/prerender/browserUtils'
+import { useContext, Suspense, lazy } from 'react'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 import { codeStorageKey } from 'src/helpers/hooks/useIdeState'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
@@ -34,15 +33,27 @@ const IdeEditor = () => {
       localStorage.setItem(codeStorageKey, state.code)
     }
   }
+  const loading = (
+    <div
+      className="text-gray-700 font-ropa-sans relative"
+      style={{ backgroundColor: 'red' }}
+    >
+      <div className="absolute inset-0 text-center flex items-center w-32">
+        . . . loading
+      </div>
+    </div>
+  )
   return (
     <div // eslint-disable-line jsx-a11y/no-static-element-interactions
       className="h-full"
       onKeyDown={handleSaveHotkey}
     >
-      <Suspense fallback={<div>. . . loading</div>}>
+      <Suspense fallback={loading}>
         <Editor
           defaultValue={state.code}
           value={state.code}
+          theme="vs-dark"
+          loading={loading}
           // TODO #247 cpp seems better than js for the time being
           defaultLanguage={ideTypeToLanguageMap[state.ideType] || 'cpp'}
           language={ideTypeToLanguageMap[state.ideType] || 'cpp'}

web/src/helpers/cadPackages/cadQueryController.js

@@ -24,7 +24,8 @@ export const render = async ({ code }) => {
         status: 'error',
         message: {
           type: 'error',
-          message: addDateToLog(cleanedErrorMessage),
+          message: cleanedErrorMessage,
+          time: new Date(),
         },
       }
     }
@@ -37,7 +38,8 @@ export const render = async ({ code }) => {
       },
       message: {
         type: 'message',
-        message: addDateToLog(data.result),
+        message: data.result || 'Successful Render',
+        time: new Date(),
       },
     }
   } catch (e) {
@@ -49,7 +51,8 @@ export const render = async ({ code }) => {
       status: 'error',
       message: {
         type: 'error',
-        message: addDateToLog('network issue'),
+        message: 'network issue',
+        time: new Date(),
       },
     }
   }
@@ -61,8 +64,3 @@ const openScad = {
 }
 
 export default openScad
-
-function addDateToLog(message) {
-  return `-> ${new Date().toLocaleString()}
-${message}`
-}

web/src/helpers/cadPackages/openScadController.js

@@ -34,7 +34,8 @@ export const render = async ({ code, settings }) => {
         status: 'error',
         message: {
           type: 'error',
-          message: addDateToLog(cleanedErrorMessage),
+          message: cleanedErrorMessage,
+          time: new Date(),
         },
       }
     }
@@ -47,7 +48,8 @@ export const render = async ({ code, settings }) => {
       },
       message: {
         type: 'message',
-        message: addDateToLog(data.result),
+        message: data.result,
+        time: new Date(),
       },
     }
   } catch (e) {
@@ -59,7 +61,8 @@ export const render = async ({ code, settings }) => {
       status: 'error',
       message: {
         type: 'error',
-        message: addDateToLog('network issue'),
+        message: 'network issue',
+        time: new Date(),
       },
     }
   }
@@ -71,8 +74,3 @@ const openScad = {
 }
 
 export default openScad
-
-function addDateToLog(message) {
-  return `-> ${new Date().toLocaleString()}
-${message}`
-}

web/src/helpers/hooks/useIdeState.js

@@ -46,7 +46,9 @@ export const useIdeState = () => {
   const code = localStorage.getItem(codeStorageKey) || initCodeMap.openscad
   const initialState = {
     ideType: 'INIT',
-    consoleMessages: [{ type: 'message', message: 'Initialising' }],
+    consoleMessages: [
+      { type: 'message', message: 'Initialising', time: new Date() },
+    ],
     code,
     objectData: {
       type: 'stl',

web/src/index.css

@@ -44,6 +44,11 @@
   @apply list-disc;
 }
 
+.mosaic-toolbar-overrides .mosaic-window .mosaic-window-toolbar {
+  /* makes the height of the toolbar based off the content inside instead of hardcoded to 30px */
+  height: unset;
+}
+
 
 /* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
 .svg-shadow {
@@ -100,4 +105,4 @@ input.error, textarea.error {
 /* used in IdeContainer component */
 #cadhub-ide .mosaic-window.console .mosaic-window-body {
   overflow-y: auto;
-}
+}