clean up panels a little (#18)

src/App.tsx

@@ -20,6 +20,7 @@ import { SketchPlane } from './components/SketchPlane'
 import { Logs } from './components/Logs'
 import { AxisIndicator } from './components/AxisIndicator'
 import { RenderViewerArtifacts } from './components/RenderViewerArtifacts'
+import { PanelHeader } from './components/PanelHeader'
 
 const OrrthographicCamera = OrthographicCamera as any
 
@@ -147,28 +148,32 @@ function App() {
   }, [code, ast])
   return (
     <div className="h-screen">
-      <Allotment>
-        <Logs />
-        <div className="h-full flex flex-col items-start">
-          <button
-            disabled={!shouldFormat}
-            onClick={formatCode}
-            className={`${!shouldFormat && 'text-gray-300'}`}
-          >
-            format
-          </button>
-          <div className="bg-red h-full w-full overflow-auto">
-            <CodeMirror
-              className="h-full"
-              value={code}
-              extensions={[javascript({ jsx: true }), lineHighlightField]}
-              onChange={onChange}
-              onUpdate={onUpdate}
-              onCreateEditor={(_editorView) => setEditorView(_editorView)}
-            />
+      <Allotment snap={true}>
+        <Allotment vertical defaultSizes={[4, 1]}>
+          <div className="h-full flex flex-col items-start">
+            <PanelHeader title="Code Editor" />
+            {/* <button
+              disabled={!shouldFormat}
+              onClick={formatCode}
+              className={`${!shouldFormat && 'text-gray-300'}`}
+            >
+              format
+            </button> */}
+            <div className="bg-red h-full w-full overflow-auto">
+              <CodeMirror
+                className="h-full"
+                value={code}
+                extensions={[javascript({ jsx: true }), lineHighlightField]}
+                onChange={onChange}
+                onUpdate={onUpdate}
+                onCreateEditor={(_editorView) => setEditorView(_editorView)}
+              />
+            </div>
           </div>
-        </div>
+          <Logs />
+        </Allotment>
         <div className="h-full">
+          <PanelHeader title="Drafting Board" />
           <Toolbar />
           <div className="border h-full border-gray-300 relative">
             <div className="absolute inset-0">

src/components/Logs.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { useStore } from '../useStore'
+import { PanelHeader } from './PanelHeader'
 
 export const Logs = () => {
   const { logs, resetLogs } = useStore(({ logs, resetLogs }) => ({
@@ -13,20 +14,23 @@ export const Logs = () => {
     }
   }, [logs])
   return (
-    <div className="h-full relative">
-      <div className="absolute inset-0 flex flex-col items-start">
-        <button onClick={resetLogs}>reset</button>
-        <div className=" overflow-auto h-full console-tile w-full">
-          {logs.map((msg, index) => {
-            return (
-              <pre className="text-xs pl-2 text-sky-600" key={index}>
-                <code style={{ fontFamily: 'monospace' }} key={index}>
-                  <span className="text-gray-400">{'- '}</span>
-                  {String(msg)}
-                </code>
-              </pre>
-            )
-          })}
+    <div>
+      <PanelHeader title="Logs" />
+      <div className="h-full relative">
+        <div className="absolute inset-0 flex flex-col items-start">
+          <button onClick={resetLogs}>reset</button>
+          <div className=" overflow-auto h-full console-tile w-full">
+            {logs.map((msg, index) => {
+              return (
+                <pre className="text-xs pl-2 text-sky-600" key={index}>
+                  <code style={{ fontFamily: 'monospace' }} key={index}>
+                    <span className="text-gray-400">{'- '}</span>
+                    {String(msg)}
+                  </code>
+                </pre>
+              )
+            })}
+          </div>
         </div>
       </div>
     </div>

src/components/PanelHeader.tsx

@@ -0,0 +1,7 @@
+export const PanelHeader = ({ title }: { title: string }) => {
+  return (
+    <div className="font-mono text-xs bg-stone-100 w-full pl-4 h-[30px] text-stone-700 flex items-center">
+      {title}
+    </div>
+  )
+}